Slicknav 和委托的点击事件

Question

我对编码比较陌生，理解有限。但是根据插件作者的说法，我将 Slicknav 用于移动屏幕尺寸。

"SlickNav menu items are created Dynamically" 所以我需要在创建 SlickNav 后使用委托点击事件或附加事件处理程序。 My SlickNav post

我需要一些帮助。根据 This，我尝试制作委托事件。

这是原始代码，它是一个“直接”事件处理程序（我认为）

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

});

顺便说一句，我所有的代码都试图做的是 1. 清除一个 Container，它是内容的显示 window。并且 2. 根据单击的菜单项将正确的内容附加到 window。

这是我对委托事件的尝试：

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

});

还尝试用 .delegate() 替换 .on()，不行。

为了完整起见，包括点击事件调用的函数

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 class。

正如所写，上面的代码必须在调用 .slicknav() 之后调用，因为它要求在调用时存在克隆菜单。否则，您将不得不更改为 $('body').on(....

至于其余部分，选择器 '.menu_item' 标识所有菜单项元素，因此单击事件处理程序将为所有这些元素执行。但是每个菜单项元素都有不同的 data-item 属性值。这样你就可以为每个人做不同的事情。

jsfiddle

Slicknav 和委托的点击事件

Slicknav and delegated click events

javascript

jquery

delegates

slicknav