Das Menü öffnet sich nicht, wenn ich auf die Schaltfläche

Question

klicke, wenn ich auf die Menüschaltfläche klicke, wird mein Menü auf dem Handy nicht geöffnet. Hier

ist der Code, ich verwende:

$('#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>

Ich kann nicht die Antwort überall finden, muss ich die Klasse auf responsive-menu-container entfernen, wenn ich auf den Button klicken responsive-menu-button

Answer 1

Sie können das touchstart Ereignis

verwenden

Answer 2

Überprüfen Sie, was $ (this) in Ihrem Code ist. Es scheint, dass $ (this) $ ('# responsive-menu-button') nicht $ ('# responsive-menu-container') ist, also fügen Sie die .slide-left-Klasse der Schaltfläche hinzu, nicht den Container.

$('#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>

Ihr Code scheint korrekt zu arbeiten, wie Sie $ haben ('# reaktions-Menü-Container') hin- und herzuschalten() am Ende, aber ich denke, das ist irreführend -. Es deckt nur andere Fehler ab.

Answer 3

versuchen mit diesem ...

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

Code finden hier seine Arbeit richtig https://jsfiddle.net/1w57uxx3/