javascript - jQuery "fly out"菜单上的单击事件

Question

我正在尝试在 jQuery 弹出菜单上创建单击事件。一旦你将鼠标悬停到第二层或第三层，我就需要事件发生。

我也是 jQuery 新手，所以如果代码不符合标准，请原谅我。

我这里有一个样本:http://jsbin.com/makoreficexe/1/edit

Answer 1

如果我理解正确的话，您只想在菜单的子项内有一个单击事件。为此，您需要找到一种方法来识别被点击的标签，方法有很多。

我只会向您展示 3 个示例，但还有很多......

1 - 您可以为每个要单击的标签创建一个类。

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")
      })

    });

问题是管理大量 ID 也可能会更加困难。但我想这对于您的简单场景来说是更好的方法

3 - 您可以使用第 n 个子元素来获取它。问题是，如果您更改 html 文件的结构，它可能会“破坏”您的 jquery 选择器。

 $("#navList li:nth-child(2)").click(function(e){

    alert(e);
  })

这里是一个包含很多类型的 jquery 选择器的列表。

http://www.tutorialspoint.com/jquery/jquery-selectors.htm

希望有帮助。