使用jquery切换下拉菜单的navicon（点击关闭也需要工作）

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> 

我有我的导航栏设置。当我点击上面的下拉菜单时，我想让navicon从汉堡变成十字。我知道以下作品在点击下拉菜单时进行切换：

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

}）;

但是，导航栏还允许用户点击菜单，菜单将再次最小化。发生这种情况时，navicon不会更改回原始的navicon。我怎样才能做到这一点？我试过以下无效：

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

感谢您的帮助！

Answer 1

您可以使用以下代码捕获页面上任何位置的点击事件，并使用e.target.id来检查您的菜单是否被点击。您可能需要根据您的需要调整此代码。

你可以用this post来解决你的问题。

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