Dropdown menu on click - javascript

I have tried numerous JS queries and none seem to be working.
I want to only show my dropdown menus when the list item they relate to is clicked, they need to show until the user either clicks off the ul or clicks a link.
Here is my html:
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#">
<li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li>
</a>
<a href="#">
<li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li>
</a>
</ul>
</div>
</div>

Try this:
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
Make sure you have the jQuery library.

In this solution dropdown menus collapse when a link is clicked as you asked.
$('a').click(function(){
$('.container ul:not(:first-child)').hide();
if($(this).next().is('ul')){
$(this).next().toggle('slow');
}
});
ul ul{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#"><li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li></a>
<a href="#"><li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li></a>
</ul>
</div>
</div>

<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li>
<li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li>
</ul>
</div>
</div>
this should work

Load jQuery library alternatively you can use like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Apply style to your menu html as below
<style>
li > ul{display:none;}
.show {display:block;}
</style>
Now this is what you are looking for.
<script>
jQuery("li:has(ul)").click(function(){
jQuery("ul",this).toggleClass('show');
});
</script>
$("li:has(ul)").click(function(){
$("ul",this).toggleClass('show');
});
li > ul{display:none;}
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#"><li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li></a>
<a href="#"><li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li></a>
</ul>
</div>
</div>
Use jQuery instead of $, because some frameworks or cms tools have conflict with it. So jQuery works always.

Related

Nested collapse

I'm trying to collapse a nested menu with jQuery. I read this answer and, to me, it appears to be similar to my solution. The problem is that mine doesn't work.
What I think I'm saying with my JavaScript code is: "hey, when a user clicks on a li that is the parent of a ul.submenu, get its ul.submenu children and attach the slideToggle only to it". But, as you can see from the snippet, it closes also the parent ul.submenu and I can't understand why.
$(document).ready(function () {
$('.submenu').hide();
$('.submenu').parent('li').click(function () {
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
You want to stop the click event from bubbling up the DOM and triggering the click handler on the parent. Use .stopPropagation() for that:
$(document).ready(function() {
$('.submenu').hide();
$('.submenu').parent('li').click(function(e) {
e.stopPropagation()
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>

Pull the active list node item in 2nd position

I have a list of items. I have node id of the 'active' class.
I want to get the active flex node_id and pull the active list item to the center position. I want to match the active_slide node_id with list item class and pull the item to center position.
eg: 233 is 'active_slide'. I want to compare the node_id and pull the list item and pull the item to center position like 69,233,299
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$('.'+node_id+'li:eq(1)').before($('.thumbnailIcon li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
You could use the item element you already get from each and then re-order the li by insertAfter:
See a Fiddle here:
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$(item).find('.'+node_id).insertAfter($(item).find('li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>

How to prevent submenus of submenu from opening when clicking on first parent?

I have a menu and in a mobile view.
This is my Javascript:
$('#main-menu li').click(function(e)
{
$(".mobile-menu-class").css("position", "absolute");
var $el = $('ul',this);
$('#main-menu > li > ul').not($el).slideUp();
$el.stop(true, true).slideToggle(400);
});
$('#main-menu > li > ul > li').click(function(e)
{
e.stopPropagation();
});
And this is my HTML:
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Live Timing
<ul class="sub-menu">
<li>MX World/European</li>
<li>MX Austria</li>
<li>SM Austria</li>
<li>MX Slovenia</li>
</ul>
</li>
<li class="parent"> Motosross
<ul class="sub-menu">
<li>
<a class="parent" href="#">MX Austria</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2007</li>
<li>2006</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX Slovenia Drzavno</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX Slovenia Pokalno</a>
<ul class="sub-menu hidden-submenu">
<li>2016</li>
<li>2015</li>
<li>2008</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX Hrvatska</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX European / World</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2006</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
Supermoto
<ul class="sub-menu">
<li><a class="parent" href="#">SM Austria</a>
<ul class="sub-menu">
<li>2016</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
Karting
<ul class="sub-menu">
<li><a class="parent" href="#">Kart Slovenia</a>
<ul class="sub-menu">
<li>2016</li>
<li>2008</li>
<li>2007</li>
<li>2006</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
Cross-Country
<ul class="sub-menu">
<li>
<a class="parent" href="#">CC Slovenia</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2012</li>
<li>2011</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li class="search-btn"> <i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
Everything is working fine, But when I click on a menu which has a submenu and which has a submenu that also has some more submenus, they get opened before I click on them.
How can fix this?

Combine Navigation UL jQuery Function

I am trying to write a function that will combine two children ul#level_2and append them to their parent li#level_1 within a dropdown #navigation.
I currently have the following which does the job, but it means I have to manually target each category. I'm sure there is a far shorter way to produce the same results with very little code.
$('li#furniture ul.level_2').children('li').appendTo('li#furniture ul.level_2:first');
$('li#furniture ul.level_2').children('li').not(':first').remove();
Here is a shortened version of my current html structure & below is the desired result:
Simple Current HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2">
Link A
</li>
</ul>
<ul class="level_2">
<li class="level_2">
Link B
</li>
</ul>
</div>
</li>
</ul>
</div>
Desire HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<ul class="level_2">
<li class="level_2">
Link A
</li>
<li class="level_2">
Link B
</li>
</ul>
</li>
</ul>
</div>
Full Detailed HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1 furniture">
Furniture
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 sofa">
Sofa
</li>
</ul>
<ul class="level_2">
<li class="level_2 bed">
Bed
</li>
</ul>
</div>
</li>
<li class="level_1 bathroom">
Bathroom
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 shower">
<a href="#">Shower/a>
</li>
</ul>
<ul class="level_2">
<li class="level_2 bath">
Bath
</li>
</ul>
</div>
</li>
</ul>
</div>
This should do what you need.
var wrapper = $(".subnav_wrapper").contents();
$(".subnav_wrapper").replaceWith(wrapper );
$('ul.level_2').children('li').appendTo('ul.level_2:first');
$('ul.level_2').not(':first').remove();
JSFIDDLE DEMO

Add class to every last-item

I would like to add that class "last-item" every last li.
Im trying this but without sucess:
<script>
$(".cbp-tm-submenu .product-categories li .children li:last-child").addClass("last-item");
<script>
I tried put on header and on footer.
HTML:
<ul class="cbp-tm-submenu">
<img class="backgroundtooltiptop" alt="background tooltip" src="http://localhost:8888/era420/wp-content/themes/era420/images/tooltipbackgroundtop.png">
<li id="woocommerce_product_categories-4" class="widget woocommerce widget_product_categories">
<ul class="product-categories">
<li class="cat-item cat-item-16 current-cat cat-parent">
Lançamentos
<ul class="children">
<li class="cat-item cat-item-17">
teste
</li>
<li class="cat-item cat-item-18">...</li>
<li class="cat-item cat-item-19">...</li>
</ul>
</li>
</ul>
</li>
<img class="backgroundtooltipbot" alt="background tooltip bot" src="http://localhost:8888/era420/wp-content/themes/era420/images/tooltipbackgroundbot.png">
</ul>
This is enough:
$(".cbp-tm-submenu li:last-child").addClass("last-item");

Categories