開閉式モバイル応答メニュー

Question

私はモバイル対応の「ハンバーガー」メニューを構築しようとしています。私はこのために使用しているHTMLは以下の通りです...

.menu_closed { 
 
    color: red; 
 
} 
 
.menu_open { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
    $('span.menu_closed').click(function() { 
 
    $('ul.menu').toggle('1000'); 
 
    $(this).toggleClass("menu_open menu_closed"); 
 
    }); 
 
</script> 
 
<span class="menu_closed">&#9776;</span> 
 
<ul class="menu" id="menu"> 
 
    <ul class='section' id='section_1'> 
 
    <li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span> 
 
     <ul> 
 
     <li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> 
 
     </li> 
 
     <li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> 
 
     </li> 
 
     <li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> 
 
     </li> 
 
     <li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> &rarr; Betting history</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_2'> 
 
    <li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span> 
 
     <ul> 
 
     <li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_5'> 
 
    <li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span> 
 
     <ul> 
 
     <li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a> 
 
     </li> 
 
     <li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a> 
 
     </li> 
 
     <li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_4'> 
 
    </ul> 
 
    <div class='bot'> 
 
    <p><a href='https://www.twitter.com/themathsproject' target="_blank">twitter</a> 
 
     <br /> 
 
     <a href='https://www.facebook.com/themathsproject' target="_blank">facebook</a> 
 
    </p> 
 
    </div> 
 
</ul>

何らかの理由でそれが必要として、それが開閉ないです。私は何が間違っているのか分かりません。

誰かが助けてくれたら大変感謝しています。

ジャック

Answer 1

$('span.menu_closed').click(function() {.hamburger、ない.menu_closedのように、標準のメニュークラスを参照する必要があり、あなたが変更した場合ので.menu_closed.menu_openに続い.menu_closedはもはや存在しないと、あなたはクリックハンドラを失います。

$(this).toggleClass("menu_open menu_closed");は、ちょうどopenまたはclosedのようなクラスを切り替える必要があります。技術的には、クラス名が.menu_openで、$.toggleClass()行を更新してクラス.menu_closedを切り替えることができますが、最後にspan.menu_open.menu_closedという要素があります。メニューに何か不自然な名前を付け、それが開いているかどうかを切り替えます。

さらに、cursor: pointer;をメニューに追加して、要素をクリックできることをユーザーに示します。

$(function() {});にjQueryコードをラップすると、DOMの準備が整うまでページがJSを実行するのを待機します。あなたのJSがページの残りのHTMLの前に来るので、これは必要です。

クリックハンドラを$.live()（旧式）から$.on()に変更しました。 $.live()はdeprecated in 1.7 and removed in 1.9で、jQueryは今すぐ$.on()を使用してイベントハンドラをアタッチすることを推奨しています。

.hamburger { 
 
    color: red; 
 
    cursor: pointer; 
 
} 
 
.open { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
    $(function() { 
 
    $('.hamburger').on('click',function() { 
 
     $('ul.menu').toggle(1000); 
 
     $(this).toggleClass("open"); 
 
    }); 
 
    }); 
 
</script> 
 
<span class="hamburger">&#9776;</span> 
 
<ul class="menu" id="menu"> 
 
    <ul class='section' id='section_1'> 
 
    <li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span> 
 
     <ul> 
 
     <li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> 
 
     </li> 
 
     <li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> 
 
     </li> 
 
     <li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> 
 
     </li> 
 
     <li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> &rarr; Betting history</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_2'> 
 
    <li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span> 
 
     <ul> 
 
     <li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_5'> 
 
    <li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span> 
 
     <ul> 
 
     <li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a> 
 
     </li> 
 
     <li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a> 
 
     </li> 
 
     <li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_4'> 
 
    </ul> 
 
    <div class='bot'> 
 
    <p><a href='https://www.twitter.com/themathsproject' target="_blank">twitter</a> 
 
     <br /> 
 
     <a href='https://www.facebook.com/themathsproject' target="_blank">facebook</a> 
 
    </p> 
 
    </div> 
 
</ul>

Answer 2

hey man i tried your code it's working fine here is 

https://jsfiddle.net/L0vnd4ay/