.hover 有效，点击无效

Question

所以这让我很头疼。我正在制作一个 "pulldown accordion submenu"（因为没有更好的名字）。我的脚本有效，但仅在悬停时有效。如果我尝试使用 .click、.on("click")、.on("click"、"li") 等，则没有任何效果。该脚本仅在使用 .hover 时有效。

注意！只有“#TopMenu”应该有点击事件。子菜单（“#accordion”）将悬停。

有什么想法吗？

工作：

$(document).ready(function () {

    $('#accordion li').hover(function () {
        $(this).find('ul').stop(true, true).slideDown()
    }, function () {
        $(this).find('ul').stop(true, true).slideUp()
    }).find('ul').hide()

$('#TopMenu li').hover(function() {

        $(this).find('li').stop(true, true).slideDown()
    }, function () {
        $(this).find('li').stop(true, true).slideUp()
    }).find('li').hide()

});

将“#TopMenu”更改为“点击”无效：

$(document).ready(function () {

    $('#accordion li').hover(function () {
        $(this).find('ul').stop(true, true).slideDown()
    }, function () {
        $(this).find('ul').stop(true, true).slideUp()
    }).find('ul').hide()

$('#TopMenu li').on('click', function() {

        $(this).find('li').stop(true, true).slideDown()
    }, function () {
        $(this).find('li').stop(true, true).slideUp()
    }).find('li').hide()

});

我这里有一个工作测试：http://jsbin.com/nidazuq/3/embed?html,js,output

我快疯了，我四处寻找解决方案。请帮忙

Answer 1

一个页面的 ID 应该是唯一的。您在页面中使用了两次。添加了 fiddle 并进行了一些更改。

$('#TopMenu li').on('click', function() {
  $(this).children('ul').slideToggle();
});
$("#TopMenu li ul li > a").hover(function(){
  $(this).next('ul').slideToggle();
})

#TopMenu li ul, .firstStep ul ul, .firstStep ul{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="TopMenu">
  <li><a href="#" class="menu_heading" rel="menu_heading">CLICK ME</a>
    <ul id="accordion">
      <li> <a href="#" class="history_heading" rel="history_heading">HISTORY</a>
        <ul>
          <li><a href="#">Link One</a></li>
          <li><a href="#">Link Two</a></li>
          <li><a href="#">Link Three</a></li>
          <li><a href="#">Link Four</a></li>
          <li><a href="#">Link Five</a></li>
        </ul>
      </li>
      <li> <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
        <ul>
          <li><a href="#">Link One</a></li>
          <li><a href="#">Link Two</a></li>
          <li><a href="#">Link Three</a></li>
          <li><a href="#">Link Four</a></li>
          <li><a href="#">Link Five</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

首先，您对多个元素使用相同的 ID。这是错误的。对于 selection.Change id='TopMenu' 到 class='TopMenu'，您应该使用 class。其次，'click' 函数未被 'li' 元素触发。你应该听 'a' 元素的点击功能。

$('.TopMenu li a').on('click', function() {});

我不熟悉 slideDown 和 slideUp 函数，但您可以从那里继续。并且不要忘记 $(this) 元素引用 <a href="#" class="menu_heading" rel="menu_heading">CLICK ME</a> 用于此点击功能。

.hover 有效，点击无效

.hover Works, On Click doesn't

jquery

accordion

jquery-hover

jquery-on