Add css class to dropdown menu on menu item click

Question

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">
                <a href="#">Lorem Ipdum</a>
            </li>
            <li class="menu-item">
                <a href="#">Lorem Ipdum</a>
            </li>
            <li class="menu-item">
                <a href="#">Lorem Ipdum</a>
            </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?

You also need to $(this).parent().find(); as dropdown menu is not inside a — vabii
– vabii, Commented May 25, 2017 at 18:24
@abhishekkannojia incorrect, the .caret class is on the span element inside the a. — suddjian
– suddjian, Commented May 25, 2017 at 18:25

Darren Cooney · Accepted Answer · 2017-05-25 18:25:30Z

1

$(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');
});

answered May 25, 2017 at 18:25

Darren Cooney

1,0702 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

suddjian · Accepted Answer · 2017-05-25 18:24:14Z

0

.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.

answered May 25, 2017 at 18:24

suddjian

2,4862 gold badges20 silver badges27 bronze badges

Comments

Sagar Jajoriya · Accepted Answer · 2017-05-25 18:28:56Z

0

$(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');
});

answered May 25, 2017 at 18:28

Sagar Jajoriya

2,3751 gold badge12 silver badges18 bronze badges

Comments

LXhelili · Accepted Answer · 2017-05-25 18:35:41Z

0

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');
});

answered May 25, 2017 at 18:35

LXhelili

9806 silver badges14 bronze badges

Collectives™ on Stack Overflow

Add css class to dropdown menu on menu item click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related