0

私はコーディングが初めてで、理解が限られています。ただし、プラグインの作成者によると、モバイル画面サイズには Slicknav を使用しています。

「SlickNav メニュー項目は動的に作成される」ため、委任されたクリック イベントを使用するか、SlickNav の作成後にイベント ハンドラーをアタッチする必要があります。 私のSlickNavの投稿

これについて助けが必要です。Thisに従って、委任されたイベントを作成してみました。

これは、「直接」イベントハンドラーである元のコードです（私は思います）

menuitem.eq(0).on('click', function(){
status = 1;
clearBox();
statusCheck();

});

ところで、私のコードがやろうとしているのは 1 です。コンテンツの表示ウィンドウであるコンテナをクリアします。そして 2. クリックされたメニュー項目に基づいて、そのウィンドウに正しいコンテンツを追加します。

委任されたイベントでの私の試みは次のとおりです。

$('#navMenu').on('click',menuitem.eq(0), function(){
status = 1;
clearBox();
statusCheck();

});

.on() を .delegate() に置き換えてみましたが、ダイスはありません。

cick イベントが呼び出している関数を含め、完全を期すために

function clearBox(){
$("#display_box").children().fadeOut(1000).appendTo(".holding");


};

function statusCheck(){
    if (status == 1){

    displaycontent.eq(0).fadeIn(1000).appendTo("#display_box");
    displaycontent.eq(0).removeClass("hide");
    $("#display_box").animate({scrollTop:0},500);
    } else{}

    if (status == 2){

    displaycontent.eq(25).fadeIn(1000).appendTo("#display_box");
    displaycontent.eq(25).removeClass("hide");
    $("#display_box").animate({scrollTop:0},500);
    } else{}  
    // Etc Etc Etc

編集：メニューにHTMLを提供

<div class ="menu_wrap"> 
<nav id = "navMenu">
<ul class ="clearfix menu">
 <li>General
    <ul class="subMenu1">
        <li class ="menu_item">Introduction</li>
        <li class ="menu_item"> What you need</li>
        <li class ="menu_item">House Rules</li>
        <li class ="menu_item">Running the Game</li>
        <li class ="menu_item">Survival</li>
        <li class ="menu_item">Encounters</li>

    </ul>
   </li>
    <li>The World 
        <ul class ="subMenu1">
            <li class ="menu_item">Nol</li>
            <li class ="menu_item">Wol</li>
            <li class ="menu_item">Sol</li>
            <li class ="menu_item">Eol</li>
        </ul>   
    </li>
    <li><a href="index_maps.html">Locations and Maps</a></li>
<li>Races and Cultures
    <ul class ="subMenu1">
            <li> <a class="allow_default" href="index_npcs.html"   target="blank">NPC Creatures</a></li>
            <li class ="menu_item"> Voran Kingdom</li>
            <li class ="menu_item">Doval Empire</li>
            <li class ="menu_item">Salatai Sultanate</li>
            <li class ="menu_item">Gamoran Republic</li>
            <li class ="menu_item">Elandel</li>
            <li class ="menu_item">Kingdom of Night</li>
            <li class ="menu_item">Halflings</li>
            <li class ="menu_item">Aiur' Dun</li>
            <li class ="menu_item">Half-Elves</li>
            <li class ="menu_item">Half-Orcs</li>
            <li class ="menu_item">Dryads</li>

    </ul>
</li>
<li> Organizations
    <ul class ="subMenu1">
            <li class="menu_item">Information</li>
            <li class ="menu_item">The Green Wardens</li>
            <li class ="menu_item">The Temple of Light</li>
            <li class ="menu_item">The Black Hand</li>
            <li class ="menu_item">The Stone Priests</li>
            <li class ="menu_item">The Golden Company</li>
            <li class ="menu_item">The Dread Guards</li>
            </ul>

</li>

<li class ="menu_item">Character Creation
    <ul class ="subMenu1">
        <li class ="menu_item"> <a class="allow_default"      href="index_personality_test.html" target="blank">Creation Test</a></li>
    </ul>   
</li>


</ul>
</nav>
</div>
4

1 に答える 1

0

次のようなことを試してください：

<nav id="navMenu">
<ul class="clearfix menu">
 <li>General
    <ul class="subMenu1">
        <li class="menu_item" data-item="intro">Introduction</li>
        <li class="menu_item" data-item="requirements">What you need</li>
        <li class="menu_item" data-item="rules">House Rules</li>
...

そして、これは JavaScript の場合:

$('#navMenu, .slicknav_menu').on('click', '.menu_item', function() {
    clearBox();

    switch($(this).attr('data-item')) {
        case 'intro': {
            // Do something here.
            break;
        }
        case 'requirements': {
            // Do something here.
            break;
        }
        case 'rules': {
            // Do something here.
            break;
        }
        // More cases...
    }
});

SlickNav によって作成された複製されたメニューが要素の直下に配置されているように見えるため、要素のみを<body>呼び出すことはできません。要素で呼び出すこともできますが、上記のコードはと要素の両方で呼び出します。SlickNav によって生成された要素には、クラスがあります。.on()#navMenubody#navMenu.slicknav_menu<ul>slicknav_menu

.slicknav()書かれているように、上記のコードは、呼び出されたときにクローンされたメニューが存在する必要があるため、呼び出した後に呼び出す必要があります。それ以外の場合は、に変更する必要があります$('body').on(...。

残りについては、セレクター'.menu_item'がすべてのメニュー項目要素を識別するため、クリック イベント ハンドラーがそれらすべてに対して実行されます。ただし、メニュー項目要素ごとにdata-item属性の値が異なります。そうすれば、それぞれに違うことをすることができます。

jsfiddle

于 2016-06-26T18:03:27.173 に答える