Slicknav和委派的點擊事件

Question

我是編碼的新手，我的理解有限。 但是，根據插件的作者，我正在使用Slicknav來顯示移動屏幕尺寸。

“ SlickNav菜單項是動態創建的”，因此在創建SlickNav之后，我需要使用委托的單擊事件或附加事件處理程序。 我的SlickNav帖子

我需要一些幫助。 根據This ，我嘗試進行委派事件。

這是原始代碼，是“直接”事件處理程序（我認為）

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

});

順便說一句，我所有想做的代碼是1.清除一個Container，它是內容的顯示窗口。 並且2.根據所單擊的菜單項將正確的內容附加到該窗口。

這是我嘗試的委托事件：

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

});

還嘗試用.delegate（）替換.on（），沒有骰子。

為了完整性，包括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>

Answer 1

嘗試這樣的事情：

<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>元素下，因此您不能僅在#navMenu元素上調用.on() 。 您可以在body元素上調用它，但是上面的代碼在#navMenu和.slicknav_menu元素上都調用它。 SlickNav生成的<ul>元素具有slicknav_menu類。

按照所寫，上面的代碼必須在調用.slicknav()之后調用，因為它要求克隆菜單在調用時存在。 否則，您將不得不更改為$('body').on(...

至於其余部分，選擇器'.menu_item'標識所有菜單項元素，因此單擊事件處理程序將對所有菜單項元素執行。 但是每個菜單項元素的data-item屬性都有不同的值。 這樣，您可以為每個人做不同的事情。

jsfiddle

Slicknav和委派的點擊事件

問題描述

1 個解決方案

解決方案1
0 已采納 2016-06-26 18:03:27

Slicknav和委派的點擊事件

問題描述

1 個解決方案

解決方案1 0 已采納 2016-06-26 18:03:27

解決方案1
0 已采納 2016-06-26 18:03:27