jQuery tab and shift+tab to show navigation - javascript

I'm trying to show sub navigation when tabbing on parent items and then hide when tabbing or shift+tabbing out of sub-menu.
Here's my JS. I have the first and last statements working, but can't get the last. What am I doing wrong?
// Show Child Navigation
jQuery('.has-child, .currenthas-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).children().show();
}
});
//SHIFT + TAB BUTTON
jQuery('.submenu li:first-child').keydown( function(e) {
if (e.keyCode == 9 && e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab first");
}
});
//TAB BUTTON
jQuery('.submenu li:last-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab last");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu"></button>
<ul class="menu">
<li class="has-child">
Menu Item
<ul class="submenu" style="display: block;">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu" style="display: none;">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
</ul>
</li>
</ul>
</nav>

Something like this?
[Has sub-sub-menus and hides siblings when showing current. To not hide siblings, simply remove code after .end() in the li.keydown event]
/* Here i simply assign each event to a variable for easy implimintation. */
var myEvents = {
click: function(e) {
jQuery(this).children('ul').show().end().siblings('li').find('ul').hide();
},
keydown: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (!e.shiftKey && jQuery('nav li').index(jQuery(this)) == (jQuery('nav li').length-1)) jQuery('nav li:first').focus();
else if (e.shiftKey && jQuery('nav li').index(jQuery(this)) === 0) jQuery('nav ul:first > li:last').focus().blur();
}
},
keyup: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (myEvents.cancelKeyup) myEvents.cancelKeyup = false;
else myEvents.click.apply(this, arguments);
}
}
}
jQuery(document)
.on('click', 'li', myEvents.click)
.on('keydown', 'li', myEvents.keydown)
.on('keyup', 'li', myEvents.keyup)
// this is needed to keep tabbing focus correct
jQuery('nav li').each(function(i) { this.tabIndex = i; });
/* Below is simply for making menus with sub menues more noticable */
jQuery('li').each(function(i) { if (jQuery(this).children('ul').length) jQuery(this).addClass('highlight'); });
li ul { display: none; }
.highlight > a { background: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu">Button</button>
<ul class="menu">
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
</ul>
</li>
</ul>
</nav>

Related

How to copy contents of list items from one list to another

I need to copy the contents of each <li> in a list to a corresponding <li> in another list. So the first item from #list1 would go into the first item of #list2. The third item of #list1 would go into the third item of #list2.
Here is my html:
<ul id="list1">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
</ul>
<ul id="list2">
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
</ul>
I tried the following, but it copies the whole <li> elements, and I only want to copy the text inside each <li>:
$(newList).html($(oldlist).html());
Then I tried this, but couldn't get it to work:
var headings = '';
$("#list1 li").each(function(idx, li) {
headings = $(li).html();
});
$("#list2 li").each(function(idx, li) {
var items = $(li).html();
$( items ).html( headings );
});
Any ideas? Thank you!
Please try to do it with below code
const list1 = document.querySelectorAll('#list1 li'),
list2 = document.querySelectorAll('.list2');
list2.forEach((list) => {
const newList = list.querySelectorAll('li');
list1.forEach((li, index) => newList[index] ? newList[index].textContent = li.textContent : '');
})
<ul id="list1">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
</ul>
<ul class="list2">
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
</ul>
<ul class="list2">
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
</ul>

Show/Hide children in menu when clicking on parent (with pure javascript)

I have bare basic knowledge in JavaScript, and I'm trying to create a menu where :
Only the first level parents are visible.
Then when you click on them, their children will be displayed.
If you click on them again (or maybe click anywhere on the page) they will close
Must work for 2 level children (for example children of children)
This is what I have so far, and I know this is far from being right. I found a bunch of jQuery solutions online, but I want it pure JavaScript & CSS.
Note: I also need to keep the number of classes & id's used to a minimum as I want to be able to use this with the WordPress menu structure. But if I need to manually add a "parent" class to each parent that has children, then that will be fine.
My JavaScript :
var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(menuParent => {
document.querySelector("#my-menu .parent").addEventListener("click", ToggleMenu);
function ToggleMenu() {
document.querySelector("#my-menu .parent ul").style.display = 'block';
}
});
My CSS :
#my-menu .parent ul {display: none;}
And, finally, my HTML :
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<li>second level child</li>
<li>second level child</li>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<li>second level child</li>
<li>second level child</li>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>
You need to use the specific element in the forEach, and then just get the firstElementChild of it, and toggle the display style:
const toggle = {
block: 'none',
none: 'block'
}
function ToggleMenu(event) {
event.stopPropagation();
event.target.classList.toggle('active');
event.target.firstElementChild.style.display = toggle[event.target.firstElementChild.style.display] || 'block';
}
var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(menuParent => {
menuParent.addEventListener("click", ToggleMenu);
})
#my-menu .parent ul {display: none;}
.active {
color: red
}
.active > * {
color: black
}
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>
or without "parent" class
const toggle = {
block: 'none',
none: 'block'
}
function ToggleMenu(event) {
event.stopPropagation();
if (event.target.firstElementChild) {
event.target.classList.toggle('active');
event.target.firstElementChild.style.display = toggle[event.target.firstElementChild.style.display] || 'block';
}
}
var menuParents = document.querySelectorAll("#my-menu li > ul");
menuParents.forEach(menuParent => {
menuParent.parentElement.addEventListener("click", ToggleMenu);
})
#my-menu li > ul {display: none;}
.active {
color: red
}
.active > * {
color: black
}
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li>Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li>child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li>Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li>child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>
Your HTML is slightly wrong: your parents inside parents don't have ul elements.
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<!-- here -->
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<!-- and here -->
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>
JavaScript wise, your toggle function doesn't actually toggle anything, or it won't toggle more than once, anyway.
Another problem is that the click handler will also get called when you click on a parent of a parent, which this code accounts for too.
Here I used an anonymous function. You don't have to do this, a named function would work just fine, but it doesn't clutter your only namespace.
This will also work with any level of parents: the attached snippet has second level parents.
var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(
menuParent => {
menuParent.addEventListener(
"click",
// inline, anonymous function
// also accepts an event parameter
function (event) {
// check if the parent element was actually clicked (prevent parent of parent from toggling display)
if (event.target == this) {
// this == menuParent
// select ul from menuParent
var menuChild = this.querySelector("ul");
// toggle child menu display, based on it's current display
if (menuChild.style.display == "block") {
// here, you could also set the display to null, since your CSS sets the display to none anyway
menuChild.style.display = "none";
} else {
menuChild.style.display = "block";
}
}
}
);
}
);
Tested on Chrome 87.0.4280.88.
var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(
menuParent => {
menuParent.addEventListener(
"click",
// inline, anonymous function
// also accepts an event parameter
function (event) {
if (event.target == this) {
// this == menuParent
// select ul from menuParent
var menuChild = this.querySelector("ul");
// toggle child menu display, based on it's current display
if (menuChild.style.display == "block") {
// here, you could also set the display to null, since your CSS sets the display to none anyway
menuChild.style.display = "none";
} else {
menuChild.style.display = "block";
}
}
}
);
}
);
#my-menu .parent ul {
padding-left: 16px;
display: none;
}
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
<li class="parent">second level parent
<ul>
<li>third level child</li>
<li>third level child</li>
</ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
<li class="parent">second level parent
<ul>
<li>third level child</li>
<li>third level child</li>
</ul>
</li>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>

Superfish sf-js-enabled seems to be not working

I tried to do a dropdown menu using Superfish. However, the drop down doesn't seems to be working. All scrips and link are directed to the js/css file. I have also done the script that needed to ready the function. But it doesn't seems to work. note I'm doing this on static html.
I have tried to change the source file name to check whether is it source issue, but doesn't seems to be, as I still can take in my main.css but not the superfish.css or .js file. I have also did comparison with some other website that uses superfish, seems to be the same.
<link href="http://localhost:8383/1004Project/public_html/css/superfish.css" rel="stylesheet" media="screen">
<script src="http://localhost:8383/1004Project/public_html/js/jquery.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/superfish.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/hoverIntent.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish();
});
</script>
<nav id="primary-menu">
<ul class="sf-js-enabled">
<li><div>Project's Stories</div></li>
<li><div>Menus</div></li>
<li><div>Promotions</div></li>
<li><div>Celebration Tips</div></li>
<li class="sub-menu">
<a href="#" class="sf-with-ul">
<div>Help</div>
</a>
<ul style="display: none;">
<li>
<div>FAQ</div>
</li>
<li>
<div>Feedback</div>
</li>
<li>
<div>Contact Us</div>
</li>
</ul>
</li>
</ul>
</nav>
I'm hoping the dropdown menu to work. It doesn't even have the dropdown.
Here is an working sample example
Your code need some css changes too so i referred some basic example from
here
Also make sure all the scripts are loading properly and you are not having any errors in browser console too regarding the scripts.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js">
</script>
</head>
<div id="sample1" class="clearfix">
<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
<li class="current">menu item
<ul style="display: none;">
<li>menu item</li>
<li class="current">menu item
<ul style="display: none;">
<li class="current">menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
<li>menu item
<ul style="display: none;">
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
</ul>
</div>
<script>
jQuery(document).ready(function () {
$('ul.sf-menu').superfish();
});
</script>
you need to make sure the document ready is placed after your html body.
if u place in top of body, it wont work because the dom element is not created yet.

Using a scroll in a bootstrap dropdown

I'm trying to add a scroll to a bootstrap dropdown menu. It's a vertical scroll and the code looks like below. First I have a dropdown that works but when I add the scroll like the second dropdown everything falls apart. How do I properly add a scroll to a dropdown the correct way. I want to use the plugin in my example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
<ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<script>
$("#myscrollid").mCustomScrollbar({
setHeight:"100px",
scrollbarPosition: "inside",
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="/PATH/TO/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/PATH/TO/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
<ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<script>
$(document).ready(function() {
$("#myscrollid").mCustomScrollbar({
setHeight:"100px",
scrollbarPosition: "inside",
});
});
</script>
</body>
</html>
Download the source and specify the path to your plugin.
You should invoke jQuery as shown.
This worked for me.
Hope this helps

Dropdown submenu issue

I´m having a problem with a Submenu.
I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE
Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.
But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.
Anyone can help me?
Here is my code
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide();
$("li:has(ul)").click(function() {
$(".menu .expanded .menu ").hide();
$("ul", this).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
Thanks a lot! I am new :D
I only removed one line :
$(".menu .expanded .menu ").hide();
You can check if its the expected behavior in my snippet
$(document).ready(function() {
var previousTarget = null;
$("ul", "li").toggle('fast');
$("li:has(ul)").click(function() {
$(".menu .expanded .menu").hide('fast');
if (this === previousTarget && $(this).children().css('display')!='none') {
$(this).children().hide('fast');
} else {
$(this).children().show('fast');
}
previousTarget = this;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>

Categories