Using Jquery to toggle navicon for dropdown menu (clicking-off needs to work too)

Question

<li class="dropdown" id="dropdownquery">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i id="toggle" class="fa fa-bars" aria-hidden="true"></i> </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdowntitle" href="#">About us</a></li>
                    <li><p class="dropdowntitle" href="#">More1</p></li>
                    <li><p class="dropdowntitle" href="#">More2</p></li>
                    <li><p class="dropdowntitle" href="#">More3</p></li>
                    <li><a class="dropdowntitle" href="#">FAQs</a></li>
                    <li><a class="dropdowntitle" href="#">Recent News</a></li>
                    <li><a class="dropdowntitle" href="#">Contact Us</a></li>
                </ul>
 </li>

I have my navbar set up. When I click on the above dropdown, I would like the navicon to change from the hamburger to a cross. I know that the following works for toggling when the dropdown is clicked:

$('.dropdown').click(function(){
$('#toggle').toggleClass('fa fa-bars fa fa-times')

});

However, the navbar also allows the user to click-off the menu and the menu will minimise again. When this happens, the navicon does not change back to its original navicon. How can I make this happen? I have tried the following to no avail:

 if ($('#dropdownquery').hasClass('dropdown open')) {
    $('body').click(function(){
    $('#toggle').toggleClass('fa fa-bars fa fa-times')
})};

Thanks for your help!

score 0 · Answer 1 · answered Sep 26 '17 at 16:06

You can use the following code to capture the click event anywhere on the page and the use e.target.id to check whether your menu was clicked. You may need to adapt this code for your needs.

You could have used this post to fix your problem.

$('body').click(function(e)
{
    var targetId = e.target.id;
    if(targetId == "dropdownquery")
    {
        $('#toggle').addClass('fa fa-bars fa fa-times')
    }

    else
    {
        $('#toggle').removeClass('fa fa-bars fa fa-times')
    }
});

Using Jquery to toggle navicon for dropdown menu (clicking-off needs to work too)

1 Answers1