jQuery“跳出”菜單上的Click事件

Question

我正在嘗試在jQuery飛出菜單上創建click事件。 當您將鼠標懸停在第二層或第三層時，我就需要進行該事件。

我也是jQuery的新手，如果代碼不符合標准，請原諒我。

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

Answer 1

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

Answer 2

一種方法是將“數據”屬性添加到您的標簽（ 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'));
});

然后，您可以在點擊函數中使用“數據隨便”屬性來觸發需要發生的事情。

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

Answer 3

如果我理解正確，那么您只想在菜單的子項中有一個click事件。 為此，您需要找到一種方法來識別單擊的標簽，並且有很多方法。

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

希望能幫助到你。