Question

我试图在jQuery飞出菜单上创建一个click事件。一旦你盘旋到第二层或第三层，就是我需要举办活动的地方。

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

我在这里有一个示例：http://jsbin.com/makoreficexe/1/edit

Answer 1

$('.listTab a').click(function(e){...});

Answer 2

一种方法是添加＆＃34;数据＆＃34;属性为您的标记（http://api.jquery.com/data/）。

例如，在第一个弹出窗口的html中：

<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>

在你的jQuery ready位中，添加：

$('.listTab li a').click( function (e){
    e.preventDefault(); // this prevents the href="#" in your a tag from firing
    console.log($(this).data('whatever'));
});

然后，您可以使用＆＃39;数据 - 无论什么＆＃39;点击功能中的属性可以触发需要发生的事情。

http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output

Answer 3

如果我理解正确，你只想在菜单的子项目中有一个点击事件。要做到这一点，你需要找到一种方法来识别被点击的标签，并且有很多方法。

我只会向您展示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

希望它有所帮助。

点击jQuery上的活动＆＃34;飞出＆＃34;菜单

3 个答案: