如何解决jQuery-live无法与附加div中的next一起使用
|| 这个元素的目的是要有一个完全基于简单无序列表的可折叠导航系统。默认情况下,所有嵌套列表都将被隐藏,.toggle div(按钮)将附加到包含嵌套列表的li项目上。然后,这些.toggle div应该隐藏/显示嵌套列表,并将类应用于切换按钮。 我已经通过手动插入.toggle div(用[toggle div]指出的位置)测试了此代码,并且一切正常。当通过append()将其添加时,似乎没有任何效果。有谁知道可能是什么原因导致此问题?任何帮助将不胜感激-谢谢! HTML:<div id=\"nav\">
<ul>
<li><a href=\"#\">nav item</a>[toggle div]
<ul>
<li><a href=\"#\">nav item</a></li>
<li><a href=\"#\">nav item</a></li>
<li><a href=\"#\">nav item</a>[toggle div]
<ul>
<li><a href=\"#\">nav item</a></li>
<li><a href=\"#\">nav item</a></li>
<li><a href=\"#\">nav item</a></li>
</ul>
</li>
<li><a href=\"#\">nav item</a></li>
</ul>
</li>
<li><a href=\"#\">nav item</a></li>
<li><a href=\"#\">nav item</a></li>
<li><a href=\"#\">nav item</a></li>
</ul>
</div>
jQuery的:
$(function(){
$(\"#nav ul li\").has(\"ul\").append(\"<div class=\'toggle\'></div>\");
$(\".toggle\").live(\"click\",function() {
if($(this).next().is(\":hidden\")) {
$(this).next().show();
$(this).addClass(\"toggled\");
} else {
$(this).next().hide();
$(this).removeClass(\"toggled\");
}
});
});
解决方法
尝试这个:
$(\"#nav li > ul\").before(\'<div class=\"toggle\"></div>\');
如果将选择直接嵌套在<li>
元素中的所有<ul>
元素,并在每个元素的前面添加<div>
。
看一下该演示:http://jsfiddle.net/xXRSZ/1/
,您要执行的操作是在切换div之前添加,而不是附加它。
更新您的代码以使用prepend
函数:
$(\"#nav ul li\").has(\"ul\").prepend(\"<div class=\'toggle\'>[toggle div]</div>\");
工作实例
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。