.hover 有效，点击时无效答案

【问题标题】：.hover Works, On Click doesn't.hover 有效，点击时无效
【发布时间】：2016-08-26 06:13:25
【问题描述】：

所以这让我很头疼。我正在制作一个“下拉手风琴子菜单”（因为没有更好的名字）。我的脚本有效，但仅在 HOVER 上有效。如果我尝试使用 .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”更改为 CLICK 无效：

$(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

我要疯了，我到处寻找解决方案。请帮忙。

【问题讨论】：

你可以添加 HTML 标记以及用于演示目的吗？
您的“工作测试”似乎不起作用

标签： jquery accordion jquery-hover jquery-on

【解决方案1】：

ID 应该是唯一的，并且对于一个页面来说是唯一的。您在页面中使用了两次。添加了一些更改的小提琴。

$('#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>

【讨论】：

您好，感谢您的意见。我看到我在这里有点偏离轨道。但是如果我知道决定只在点击时打开子菜单呢？一起移除悬停？？

【解决方案2】：

首先，您对多个元素使用相同的 ID。这是错误的。您应该使用类进行选择。将 id='TopMenu' 更改为 class='TopMenu' 。其次，“li”元素不会触发“click”功能。你应该听'a'元素的点击功能。

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

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

【讨论】：