Add css class to dropdown menu on menu item click - javascript

I have bootstrap 3 menu. And I want to add class to "dropdown" menu if usre click on "caret" ( parent menu item )
<ul id="menu-testing-menu" class="nav navbar-nav sf-js-enabled" style="touch-action: pan-y;">
<li class="menu-item menu-item-has-children dropdown">
<a class="sf-with-ul" data-toggle="dropdown">Home<span class="caret"></span></a>
<ul class="dropdown-menu" style="display: none;">
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
</ul>
</li>
</ul>
So I try to use js
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).find('.dropdown-menu').toggleClass('dd-menu-show');
});
but it doesn't work. How to solve thise problem?

$(this).find('.dropdown-menu') is not possible when clicking .caret because $(this) is looking inside the current element and it is empty.
You might also want to consider adding the click event to the entire <a>.
Try this
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
var parent = $(this).closest('.dropdown');
parent.find('.dropdown-menu').toggleClass('dd-menu-show');
});

.find() searches for a node inside the selected node. You are selecting the .caret span element, so it's trying to find a .dropdown-menu node inside that, which of course does not exist. You'll want to navigate up the tree to the .dropdown node, and then do your find() call.

$(this).find(".dropdown-menu") will not work because there is no element in the current clicked element with class dropdown-menu.
So just try :
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$('.dropdown-menu').toggleClass('dd-menu-show');
});

You can do it in this way.
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).parent().next('.dropdown-menu').toggleClass('dd-menu-show');
});

Related

Jquery - How to add active class to entire navigation menu path?

I have a menu with 3 levels, and I would like to use a class for the first active li and a second class for all other subsequent li. When I click on a selection the level 3 to remain active the whole path (level 1, level 2, level 3). If I click on a selection on level 2 to remain active up to level 2.
I have the following:
$(document).ready(function(){
$('.sf-menu li a').each(function(index) {
if((this.pathname.trim() == window.location.pathname))
$(this).parent().addClass("selected");
var next_li = $(this).parent().next();
$('a', next_li).addClass("selected2");
});
});
I think I got it this time, It's a bit dirty but It works.
First add classes so you can identify first, second and third level <li> elements. Do it in the foreach, or whatever bucle that makes the menu (or by hand if there's no such bucle):
<ul id="navlist" >
<li id="home" class="firstLevel">
<a class="nav" href="home">Home</a>
<ul class="secondLevel">
<li class="secondLevel">
<a class="nav2" href="home">sub-Home1</a>
<ul>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
</ul>
</li>
<li><a class="nav2" href="home">sub-Home2</a></li>
</ul>
</li>
<li id="about" class="firstLevel">
<a class="nav" href="about-us">About Us</a>
</li>
</ul>
Then use jQuery closest. It traverses up the DOM tree and matches the closest item, you can pass a selector (the firstLevel or secondLevel classes we just created):
$('#navlist a').on('click', function (e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$('#navlist a').removeClass('selected2');
$(this).closest('.secondLevel').children('a').addClass('selected2');
$(this).closest('.firstLevel').children('a').addClass('selected2');
$(this).addClass('selected');
});
Then you add !important to the selected class (so when there's a colision like in the About Us link selected is the class that is applied). This is the dirtiest part.
Check a working fiddle: https://jsfiddle.net/4r5vg/661/

Finding Child of Parent Jquery

I am have a link in a li and when you click on it, it should open a ul, also contained in the li. I can't seem to get it to select the right element though. Code below
HTML
<ul>
<li>
hi
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
CSS
.hidden{display:none;}
Js
$( "a" ).click(function() {
$(this).parent("li").children("ul").css("display","block");
});
Since the ul is the next sibling to the a, you'd use next to access it. Then you can look at the ul's children (children) or descendants (find) for the .hidden one and remove the class (removeClass):
$(this).next().children(".hidden").removeClass("hidden");
Live Example:
$("a").on("click", function() {
$(this).next().children(".hidden").removeClass("hidden");
return false;
});
.hidden {
display: none;
}
<ul>
<li>
one
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
two
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
three
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
In your code you are trying to make ul displayed although it is visible and it does not effect the li under it so you need to access that li like this. Removing the hidden class of the element to make it displayed is a better approach than assigning inline style as the commentators said
$(this).parent("li").children("ul").children("li").removeClass("hidden");
check here fiddler link...
hope it will help you....
$( "a" ).click(function() {
$(this).next().children(".hidden").removeClass("hidden");
});

jQuery accordion slides up multiple times

I'm making a jquery accordion and I have some issues
My jQuery searches for a ul inside a class and if it has a certain class it slides down, but it slides down as many times as the element ul exists in the whole nav
Here is my jquery code so far:
if($(this).has("ul").length){
$(".menu ul li").on('click',function(e){
$(this).addClass('open').siblings().removeClass('open').children();
$('.menu ul li ul').slideUp();
if($(this).parents().find(".open").length){
$(this).children('ul').slideDown();
}
//$(this).parents().find(".open").children('ul').slideDown();
e.preventDefault();
});
};
this is my html:
<div class="menu">
<a id="jump" href="#"><p>Menu</p><span class="right">▼</span></a>
<nav class="row">
<div class="page_wrapper">
<ul class="niveau_1">
<li class="active">Home</li>
<li>Group
<ul class="sub-menu">
<li>QHSE/Awards</li>
<li>Vacatures/</li>
</ul>
</li>
<li>Nieuws & Media
<ul class="sub-menu">
<li>Van Moer in de media</li>
<li>Nieuwsarchief</li>
</ul>
</li>
<li>Sport & Events
<ul class="sub-menu">
<li>Casual Friday
<ul>
<li>Inschrijving</li>
<li>Foto's</li>
</ul>
</li>
<li>Thursday Lounge</li>
<li>Triatlon</li>
<li>Sponsoring</li>
<li>Beurzen</li>
<li>Kalender</li>
</ul>
</li>
<li>Vestigingen</li>
<li>Contact</li>
</ul>
</div>
just guessing sincei don't have HTML to look too... your problem is here in parents()
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
i think u need parent() here
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
if($(this).parent().find(".open").length){ //try this
$(this).children('ul').slideDown();
}
note: it would be easy if you provide us with your HTML too

Delete link text with jQuery

I'm working with WordPress and 2 different plugins (Icons per post & pages and Multi-Level navigation). With the first plugin I selected a Icon per a page and with the second I built a dropdown menu.
The thing is that I want to show only the page Icon but the plugin remains writing the page title. I want to delete it with jQuery.
This is the generated HTML for the menu:
<ul class="children" style="display: none; visibility: hidden; ">
<li class="page_item page-item-514">
<a href="http://www.pausoberriak.net/lan-emailea/onurak/?lang=eu">
<img src="http://www.pausoberriak.net/wp-content/uploads/icons/beneficios.png" class="page_icon" alt="Onurak">Onurak</a>
</li>
<li class="page_item page-item-179">
<a href="http://www.pausoberriak.net/lan-emailea/lan-emailea-formulak/?lang=eu">
<img src="http://www.pausoberriak.net/wp-content/uploads/icons/formulas.png" class="page_icon" alt="Formulak">Formulak</a>
<ul class="children" style="display: none; visibility: hidden; ">
<li class="page_item page-item-183">
Praktikak enpresetan
</li>
<li class="page_item page-item-186">
Zerbitzu Okupazionala
</li>
<li class="page_item page-item-195">
Kontratazioa
</li>
</ul>
</li>
</ul>
I used this code to delete the text, in that case it should delete "Onurak", "Formulak", "Praktikak enpresetan", "Zerbitzu okupazionala" and "kontratazioa" :
<script type="text/javascript">
jQuery('#suckerfishnav li li a').text("");
</script>
It works, but it also deletes the img tag and children ul. I only want to remove the link text and have the other stuff remain.
Thanks in advance
First, block level elements are not valid inside a elements, i.e. you cannot put the ul element inside a.
You can iterate over all children and only remove text nodes:
jQuery('#suckerfishnav li li a').contents().each(function() {
if(this.nodeType === 3) {
this.parentNode.removeChild(this);
}
});
or
jQuery('#suckerfishnav li li a').contents().filter(function() {
return this.nodeType === 3;
}).remove()
Reference: .contents, Node
I'd start by trying to use jQuery's child selector instead of the "#suckerfishnav li li a" that you've used.
Something like jQuery('#suckerfishnav > li > li > a') might help.
http://api.jquery.com/child-selector/

active class javascript

I have used the following code to display menu
<ul id="menu">
<li id="11">Start a League<span></span></li>
<li id="12">Roster Settings<span></span></li>
<li id="13">Draft Settings<span></span></li>
<li id="14">Transaction Settings<span></span></li>
<li id="15">Playoff Settings<span></span></li>
<li id="16">Launch Your League!<span></span></li>
</ul>
If I click any menu the class active should be added in that particular li. How can i do it with javascript.
Using jQuery:
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});
I supposed that you only wanted a single <li> with the active class.
Demo: http://jsfiddle.net/j9qTE/1/

Categories

Resources