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이 햄버거에서 십자가로 바뀌게됩니다. 드롭 다운을 클릭하면 다음과 같이 전환됩니다.

});

그러나 navbar는 사용자가 메뉴를 클릭 할 수있게하고 메뉴가 다시 최소화됩니다. 이 경우 Navicon은 원래 navicon으로 다시 변경되지 않습니다. 어떻게해야합니까? 다음을 시도해 보지 않았습니다.

도움 주셔서 감사합니다.

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