ボタンをクリックするとメニューが開きません

Question

メニューボタンをクリックすると、メニューがモバイルで開かれません。ここで

は、私が使用していますコードです：、私はボタンをクリックしたときに responsive-menu-container上のクラスを削除する必要があり、私は答えをどこでも見つけるカント

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

Answer 1

touchstartイベントを利用できます

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

Answer 2

あなたのコードに何が書かれているか確認してください。 $（this）は$（ '＃respondive-menu-container'）ではない$（ '＃respondive-menu-button'）だから、あなたはコンテナではなくボタンに.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>

あなたのコードは、あなたが$（「＃応答メニューコンテナ」）を持っているように、正常に動作しているようです（切り替え）最後に、私は、これは誤解を招くと思い - 。それは他のエラーのみをカバーします。

Answer 3

これにしてみてください...

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