Slicknav和委托单击事件
我对编码很陌生，我的理解也很有限。但我使用Slicknav的移动屏幕大小，然而，根据作者的插件。
"SlickNav菜单项是动态创建的“，因此在创建SlickNav之后，我需要使用委托单击事件或附加事件处理程序。我的SlickNav帖子
这件事我需要帮助。根据这的说法，我试着做了一个委托事件。
下面是原始代码，它是一个“直接”事件处理程序(我认为)
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>回答 1
Stack Overflow用户
发布于 2016-06-26 18:03:27
试着做这样的事情：
<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元素上都调用它。<ul>元素由SlickNav生成，其中包含slicknav_menu类。
正如所写的那样，必须在调用.slicknav()之后调用上面的代码，因为它要求在调用时存在克隆菜单。否则，您将不得不更改为$('body').on(...。
至于其余部分，选择器'.menu_item'标识所有菜单项元素，因此单击事件处理程序将对所有菜单项元素执行。但是每个菜单项元素对于data-item属性都有不同的值。这样你就可以为每个人做一些不同的事情。
https://stackoverflow.com/questions/38040839
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号