单击jQuery“飞出”菜单上的事件
单击jQuery“飞出”菜单上的事件
提问于 2014-08-12 18:40:31
我试图在jQuery飞出菜单上创建一个单击事件。一旦你悬停到第二或第三层是我需要事件发生的地方。
我也是jQuery新手，所以如果代码不符合标准，请原谅我。
我这里有一个样本：http://jsbin.com/makoreficexe/1/edit
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-12 19:11:13
如果我正确理解它，您只想在菜单的子项中有一个单击事件。要做到这一点，您需要找到一种方法来识别被单击的标记，并且有很多种方法。
我给你们看三个例子，但是有很多.
你可以为你想要点击的每一个标签都有一个类。
HTML -指定一个类
<li><a href="#">Home</a>
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});本例中的问题是很难管理很多类.
2使用Id
<li><a href="#">Home</a>
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});的问题是，管理大量的ids也会更加困难。但我想这是您的简单场景的更好的方法。
3-你可以用第n个孩子得到它。问题是，如果更改html文件的结构，它可能会“破坏”jquery选择器。
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})下面列出了许多类型的jquery选择器。
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
希望能帮上忙。
Stack Overflow用户
发布于 2014-08-12 18:50:41
$('.listTab a').click(function(e){...});Stack Overflow用户
发布于 2014-08-12 19:09:31
一种方法是将“数据”属性添加到a标记(http://api.jquery.com/data/)中。
例如，在html中，您的第一次飞出：
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>在您的jQuery就绪位中，添加以下内容：
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});然后，您可以在click函数中使用‘data-任何’属性来触发需要发生的事情。
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25271744
复制相关文章
相似问题
腾讯云开发者
