Show/Hide submenu by click HTML - javascript

I have a side menu with some menu items.
One menu items can have some submenu items
Here is how I realize this
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
I need to click on a menu item and it will show submenu items if I click once again it will hide them. How can I realize this?


See here I apply click even on li not on because on anchor you add a url of other pages, so 22 event not fired on same element.Checkout and if any issue let me know
$(document).ready(function() {
$('.main_wrapper li').on('click', function() {
$(this).children('.submenu').slideToggle();
});
});
.submenu {
display: none;
}
ul li {
background-color: #000;
margin-bottom: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<ul class="main_wrapper">
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
<li>Patient Database</li>
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
</ul>


if you use bootstrap then it will be easy to do with it.
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<!-- my changes starts here -->
<li data-toggle="collapse" data-target="#test">Calendar
<ul class="submenu collapse" id="test">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
source: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

Related

Add class to ancestor element based on existence of element in the hierarchy

I have a sample code below
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
If one of the li has a class active how can I also add a class active on the parent li or this part
<li class="treeview">

You can use jquery to achieve this. Please find the snippet below.
$('.treeview-menu li').on('click', function() {
$(this).addClass('active');
$(this).closest('li.treeview').addClass('active');
})
.active>a {
color: green;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<ul>
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
</ul>

If you need the entire treeview ancestry of an active <li> to have the class .active, you can use jQuery's :has:
$('.treeview:has(li.active)').addClass('active');
$('.treeview:has(li.active)').addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you need only the immediately closest treeview, you can use .closest():
$('.treeview li.active').closest(".treeview").addClass('active');
$('.treeview li.active').closest(".treeview").addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4 (Active)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

You don't want to select any li.active outside of the .treeview tree hierarchy:
$('.treeview li.active').closest('.treeview').addClass('active');

Activate the menu on the left side bar based on url

I have two different pages with a common sidebar menu. When I click on the menu, it will redirect to another page and a class should be added to the parent menu. Even when I refresh the page.
Check this code
Here is my js code:
$(document).ready(function () {
$("#sidebar-menu a").each(function () {
var pageUrl = window.location.href.split(/[?#]/)[0];
console.log(pageUrl);
if (this.href == pageUrl) {
$(this).addClass("active");
$(this).parent().addClass("active"); // add active to li of the current link
$(this).parent().parent().prev().addClass("active"); // add active class to an anchor
$(this).parent().parent().parent().parent().prev().click();
$(this).parent().parent().prev().click(); // click the item to make it drop
}
});
});

menuother.html
<link rel="stylesheet" href="http://themepixels.me/slim1.1/css/slim.css">
<style>
</style>
<div class="slim-sidebar">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Dashboard
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="menu.html" class="nav-sub-link menu" data-number='1' >Page 01</a></li>
<li class="nav-sub-item">Page 02</li>
<li class="nav-sub-item">Page 03</li>
<li class="nav-sub-item">Page 04</li>
<li class="nav-sub-item">Page 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Menu
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item">Menu 01</li>
<li class="nav-sub-item">Menu 02</li>
<li class="nav-sub-item">Menu 03</li>
<li class="nav-sub-item">Menu 04</li>
<li class="nav-sub-item">Menu 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-book-outline"></i> Pages
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item sub-with-sub">
Pricing
<ul>
<li class="sub-sub-link"><a href="" >Pricing 01</a></li>
<li class="sub-sub-link">Pricing 02</li>
<li class="sub-sub-link">Pricing 03</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Hi
<!-- slim-sidebar -->
<script src="http://themepixels.me/slim1.1/lib/jquery/js/jquery.js"></script>
<script src="main.js"></script>
<script type="text/javascript">
$(".menu").click(function(){
localStorage.setItem("menu", this.getAttribute('data-number'));
});
// For default Activation
var data = localStorage.getItem('menu');
if(!data)
localStorage.setItem("menu", 1);
console.log("Default Configuration ");
console.log(data);
// console.log( $('.menu').eq(data).html());
console.log( $('.menu').eq(data-1).css({background: 'red'}));
$('.menu').eq(data-1).parent().parent().prev().css({background: 'red'})
</script>
menu.html
</style>
<div class="slim-sidebar">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Dashboard
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="menu.html" class="nav-sub-link menu" data-number='1' > Page 01 </a></li>
<li class="nav-sub-item">Page 02</li>
<li class="nav-sub-item">Page 03</li>
<li class="nav-sub-item">Page 04</li>
<li class="nav-sub-item">Page 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Menu
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item">Menu 01</li>
<li class="nav-sub-item">Menu 02</li>
<li class="nav-sub-item">Menu 03</li>
<li class="nav-sub-item">Menu 04</li>
<li class="nav-sub-item">Menu 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-book-outline"></i> Pages
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item sub-with-sub">
Pricing
<ul>
<li class="sub-sub-link"><a href="" >Pricing 01</a></li>
<li class="sub-sub-link">Pricing 02</li>
<li class="sub-sub-link">Pricing 03</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- slim-sidebar -->
<script src="http://themepixels.me/slim1.1/lib/jquery/js/jquery.js"></script>
<script src="main.js"></script>
<script type="text/javascript">
$(".menu").click(function(){
localStorage.setItem("menu", this.getAttribute('data-number'));
});
// For default Activation
var data = localStorage.getItem('menu');
if(!data)
localStorage.setItem("menu", 1);
console.log("Default Configuration ");
console.log(data);
console.log( $('.menu').eq(data-1).css({background: 'red'}));
$('.menu').eq(data-1).parent().parent().prev().css({background: 'red'})
</script>
Actually, You give me only html and js code so I used the local storage for this solution. you can solve this problem using many way.

JQuery display menu items one at a time

I have a menu with two menu items and I want to use JQuery to display sub-menu for each menu item when the user clicks on menu item.
What happens is both submenues are displayed (where class="dropdown-content"). How can I modify my code to just display the submenu that is
under the menu item clicked. Is there any way to do that without having to specify id?
Below is my menu:
$('.menu-item').on('click', function() {
$('.dropdown-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

you need to use children() function to toggle the children of particular DOM
so use $(this).children("ul").toggle(); to accomplish what you are looking for
$('.menu-item').on('click', function() {
$(this).children("ul").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'>
<span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

The main problem is you should use this to identify the li you are cliking, and then use find() to traverse downwards along descendants of DOM elements.
$('.menu-item').on('click', function() {
$(this).find(".dropdown-content").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

Dropdown identification

I have two dropdown options:
<ul class="menu">
<li hidden class="inicio"><a href "#">Inicio</a>
</li>
<li class="dropdown">
OPTION 1<b class="caret"></b>
<ul class="dropdown-menu">
<li class="bd-ric">Option 1.1
</li>
<li>Option 1.2
</li>
</ul>
</li>
<li class="dropdown">
OPTION 2<b class="caret"></b>
<ul class="dropdown-menu">
<li class="bd-ric">Option 2.1
</li>
<li>Option 2.2
</li>
</ul>
</li>
</ul>
When i tried to create the Javascript to toggle it, they both opened:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
})
Should I create a function and invoke it on the html or can I call the toggle event for a specific id?

You can use jQuery's next method:
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li hidden class="inicio"><a href "#">Inicio</a>
</li>
<li class="dropdown">
OPTION 1<b class="caret"></b>
<ul class="dropdown-menu">
<li class="bd-ric">Option 1.1
</li>
<li>Option 1.2
</li>
</ul>
</li>
<li class="dropdown">
OPTION 2<b class="caret"></b>
<ul class="dropdown-menu">
<li class="bd-ric">Option 2.1
</li>
<li>Option 2.2
</li>
</ul>
</li>
</ul>

jquery mtree onload open last clicked node with cookie option

I am using mtree( sample you can seehere for display my menu list nodes When i click on the node text (hyperlink) . I want to open the node which i clicked and all other nodes should be closed. I am using the following code.
In main.html page i have list with Africa,America,Asia,Europe,Oceania,Arctica and
Antarctica
Africa is having sub menu as: Algeria,Marocco,Libya,Somalia,Kenya,Mauritania and South Africa( all are hyperlink text)
when I click on kenya text hyperlink it will redirects to kenya.html page so on load of kenya.html i want Africa menu list should open with Kenya text highlighted
main.html
<body>
</div>
<ul class="mtree transit">
<li id ="shiva" class ="shiva">Africa
<ul>
<li>Algeria</li>
<li>Marocco</li>
<li>Libya</li>
<li>Somalia</li>
<li>Kenya</li>
<li>Mauritania</li>
<li>South Africa</li>
</ul>
</li>
<li>America
<ul>
<li>North-America
<ul>
<li>Canada</li>
<li>USA
<ul>
<li>New York</li>
<li>California
<ul>
<li>Los Angeles</li>
<li>San Diego</li>
<li>Sacramento</li>
<li>San Francisco</li>
<li>Bakersville</li>
</ul>
</li>
<li>Lousiana</li>
<li>Texas</li>
<li>Nevada</li>
<li>Montana</li>
<li>Virginia</li>
</ul>
</li>
</ul>
</li>
<li>Middle-America
<ul>
<li>Mexico</li>
<li>Honduras</li>
<li>Guatemala</li>
</ul>
</li>
<li>South-America
<ul>
<li>Brazil</li>
<li>Argentina</li>
<li>Uruguay</li>
<li>Chile</li>
</ul>
</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
<li>India</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>Vietnam</li>
<li>Singapore</li>
<li>Indonesia</li>
<li>Mongolia</li>
</ul>
</li>
<li>Europe
<ul>
<li>North
<ul>
<li>Norway</li>
<li>Sweden</li>
<li>Finland</li>
</ul>
</li>
<li>East
<ul>
<li>Romania</li>
<li>Bulgaria</li>
<li>Poland</li>
</ul>
</li>
<li>South
<ul>
<li>Italy</li>
<li>Greece</li>
<li>Spain</li>
</ul>
</li>
<li>West
<ul>
<li>France</li>
<li>England</li>
<li>Portugal</li>
</ul>
</li>
</ul>
</li>
<li>Oceania
<ul>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</li>
<li>Arctica</li>
<li>Antarctica</li>
</ul>
<script src="jquery.min.js"></script>
<script src='jquery.velocity.min.js'></script>
<script src="mtree.js"></script>
<script src="shiva.js"></script>
THIS IS MAIN PAGE
</body>
kenya.html
<body onload="clickButton()">
</div>
<ul class="mtree transit">
<li id ="shiva" class ="shiva">Africa
<ul id = "shiva">
<li>Algeria</li>
<li>Marocco</li>
<li>Libya</li>
<li>Somalia</li>
<li>Kenya</li>
<li>Mauritania</li>
<li>South Africa</li>
</ul>
</li>
<li>America
<ul>
<li>North-America
<ul>
<li>Canada</li>
<li>USA
<ul>
<li>New York</li>
<li>California
<ul>
<li>Los Angeles</li>
<li>San Diego</li>
<li>Sacramento</li>
<li>San Francisco</li>
<li>Bakersville</li>
</ul>
</li>
<li>Lousiana</li>
<li>Texas</li>
<li>Nevada</li>
<li>Montana</li>
<li>Virginia</li>
</ul>
</li>
</ul>
</li>
<li>Middle-America
<ul>
<li>Mexico</li>
<li>Honduras</li>
<li>Guatemala</li>
</ul>
</li>
<li>South-America
<ul>
<li>Brazil</li>
<li>Argentina</li>
<li>Uruguay</li>
<li>Chile</li>
</ul>
</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
<li>India</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>Vietnam</li>
<li>Singapore</li>
<li>Indonesia</li>
<li>Mongolia</li>
</ul>
</li>
<li>Europe
<ul>
<li>North
<ul>
<li>Norway</li>
<li>Sweden</li>
<li>Finland</li>
</ul>
</li>
<li>East
<ul>
<li>Romania</li>
<li>Bulgaria</li>
<li>Poland</li>
</ul>
</li>
<li>South
<ul>
<li>Italy</li>
<li>Greece</li>
<li>Spain</li>
</ul>
</li>
<li>West
<ul>
<li>France</li>
<li>England</li>
<li>Portugal</li>
</ul>
</li>
</ul>
</li>
<li>Oceania
<ul>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</li>
<li>Arctica</li>
<li>Antarctica</li>
</ul>
<script src="jquery.min.js"></script>
<script src='jquery.velocity.min.js'></script>
<script src="mtree.js"></script>
<script src="shiva.js"></script>
THIS IS Kenya PAGE
</body>

Categories

Resources