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();

});

还尝试用 .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>
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>元素下方，因此您不能.on()仅在您的#navMenu元素上调用。您可以在body元素上调用它，但上面的代码同时在#navMenu和.slicknav_menu元素上调用它。<ul>SlickNav 生成的元素上有类slicknav_menu。

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

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

jsfiddle

于 2016-06-26T18:03:27.173 回答