2016-12-20 9 views
-1

Когда я нажимаю кнопку меню, мое меню не открывается на мобильном устройстве.Меню не открывается, когда я нажимаю кнопку

Вот код, я использую:

$('#responsive-menu-button').click(function() { 
 
    if($('#responsive-menu-container').hasClass('slide-left')) { 
 
     $(this).removeClass('slide-left'); 
 
    } else { 
 
     $(this).addClass('slide-left'); 
 
    } 
 
$('#responsive-menu-container').toggle(); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<button id="responsive-menu-button" class="responsive-menu-button responsive-menu-accessible responsive-menu-boring" type="button" aria-label="Menu"><span class="responsive-menu-box"><span class="responsive-menu-inner"></span></span></button> 
 

 
    <div id="responsive-menu-container" class=" 
 
     slide-left "> 
 
     <div id="responsive-menu-wrapper"> 
 
     <div id="responsive-menu-title">Menu</div><ul id="responsive-menu" class=""><li id="responsive-menu-item-12" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item responsive-menu-item responsive-menu-current-item"><a href="http://www.fanfarejulianarossum.nl/" class="responsive-menu-item-link">Home</a></li></ul><div id="responsive-menu-search-box"> 
 
      <form action="http://www.fanfarejulianarossum.nl" class="responsive-menu-search-form" role="search"> 
 
       <input type="search" name="s" placeholder="Search" class="responsive-menu-search-box"> 
 
      </form> 
 
      </div> </div> 
 
    </div>

Я не могу найти ответ в любом месте, мне нужно удалить класс на responsive-menu-container, когда я нажимаю на кнопку responsive-menu-button

+0

И, как всегда, я буду спрашивать «почему вы используете JS для этого?». – junkfoodjunkie

ответ

0

Вы можете использовать событие

$('#responsive-menu-button').on('click touchstart', function() { 
    if($('#responsive-menu-container').hasClass('slide-left')) { 
     $(this).removeClass('slide-left'); 
    } else { 
     $(this).addClass('slide-left'); 
    } 
    $('#responsive-menu-container').toggle(); 
}); 
+0

спасибо за ваш ответ, но он все еще не работает. Он также не работает, когда я изменяю размер окна –

+0

Я понял, что у вас нет закрывающих скобок в вашем вопросе, вы получаете какую-либо ошибку –

0

Проверьте, что такое $ (это) в вашем коде. Кажется, что $ (это) $ ('# responsive-menu-button') не $ ('# responsive-menu-container'), поэтому вы добавляете класс .slide-left к кнопке, а не к контейнеру.

$('#responsive-menu-button').click(function() { 
 
    if ($('#responsive-menu-container').hasClass('slide-left')) { 
 
    $('#responsive-menu-container').removeClass('slide-left'); 
 
    } else { 
 
    $('#responsive-menu-container').addClass('slide-left'); 
 
    } 
 
    $('#responsive-menu-container').toggle(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button id="responsive-menu-button" class="responsive-menu-button responsive-menu-accessible responsive-menu-boring" type="button" aria-label="Menu"><span class="responsive-menu-box"><span class="responsive-menu-inner"></span></span> 
 
</button> 
 

 
<div id="responsive-menu-container" class=" 
 
    slide-left "> 
 
    <div id="responsive-menu-wrapper"> 
 
    <div id="responsive-menu-title">Menu</div> 
 
    <ul id="responsive-menu" class=""> 
 
     <li id="responsive-menu-item-12" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item responsive-menu-item responsive-menu-current-item"><a href="http://www.fanfarejulianarossum.nl/" class="responsive-menu-item-link">Home</a> 
 
     </li> 
 
    </ul> 
 
    <div id="responsive-menu-search-box"> 
 
     <form action="http://www.fanfarejulianarossum.nl" class="responsive-menu-search-form" role="search"> 
 
     <input type="search" name="s" placeholder="Search" class="responsive-menu-search-box"> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Ваш код, кажется, правильно работать, так как у вас есть $ ('# отзывчивым меню-контейнер') переключения() в конце, но я думаю, что это вводит в заблуждение. - это распространяется только на другие ошибки.

0

попробовать с этим ...

$('#responsive-menu-button').click(function() { 
     if($('#responsive-menu-container').hasClass('slide-left')) { 
      $(this).removeClass('slide-left'); 
     } else { 
      $(this).addClass('slide-left'); 
     } 

    $('#responsive-menu-container').toggle(); 
    }); 

найти код здесь его работы правильно https://jsfiddle.net/1w57uxx3/

Смежные вопросы