событие click не работает в гибком меню

Question

У меня есть отзывчивое меню, когда я тестирую свое меню на мобильном телефоне, оно будет для него монастырью, покажет две кнопки один для панели навигации другой, чтобы переключить боковую панель, чтобы удалить классы hidden-xs и скрытый-см. моя проблема: btnToggleSidebar не отвечает на событие click, может кто-нибудь мне помочь?

HTML нав

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar" style="color:#fff"></span> 
        <span class="icon-bar" style="color:#fff"></span> 
        <span class="icon-bar" style="color:#fff" ></span> 
       </button> 
       <button type="button" id="btnToggleSidebar" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex2-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <i class="glyphicon glyphicon-cog" style="color:#fff"></i> 
       </button> 

        <a class="navbar-brand" id="goHome" href="/Home/MyEvents"><span class="logo logo-icon"></span></a> 
        <a class="navbar-brand" id="goHome" href="/Home/MyEvents">@ViewBag.Configname</a> 
</div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       @*<ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#contact">Contact</a></li> 
       </ul>*@ 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a id="username" href="./">@ViewBag.UsernameAndRole <span class="sr-only ">(current)</span></a></li> 
       </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

JavaScript

$(document).on('click', 'button #btnToggleSidebar.navbar-toggle', function() { 

     alert("defvs"); 
     $("div").toggleClass("hidden-sm").toggleClass("hidden-xs"); 

    }); 

Answer 1

Удалить пространство между button и #btnToggleSidebar.navbar-toggle

$(document).on('click', 'button#btnToggleSidebar.navbar-toggle', function() { 

     alert("defvs"); 
     $("div").toggleClass("hidden-sm").toggleClass("hidden-xs"); 

    }); 

Answer 2

Не уверен, что вы селектор ориентации, но изменить его:

$(document).on('click', '#btnToggleSidebar', function() { 
    alert("defvs"); 
    $("div").toggleClass("hidden-sm").toggleClass("hidden-xs"); 
}); 

Вызывает предупреждение для стрельбы. Поскольку #btnToggleSidebar и .navbar-toggle применяются к одному и тому же элементу, вы можете просто настроить идентификатор и применить к нему функцию click.

Помните, что у вас есть другие проблемы после этого события: в мобильном режиме кнопки на вашем навигаторе полностью исчезают.

Answer 3

Попробуйте

$('.pull-left').on('click', function() { 

    alert("Hiding Nav"); 
    $('.navbar-nav:first-child').toggleClass("hidden-sm"); 


}); 
$('.pull-right').on('click', function() { 

    alert("Hiding Sidebar"); 
     $('.nav:last-child').toggleClass("hidden-xs"); 

});