Question

所以这给我带来了很大的威胁。我正在制作一个“下拉手风琴子菜单”（因为缺少一个更好的名字）。我的脚本有效，但仅适用于HOVER。如果我尝试使用.click，.on（“click”）,. on（“click”，“li”）等，则无效。该脚本仅在使用.hover。

时有效

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

有什么想法吗？

工作：

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

我为此疯狂，我搜索了高低的解决方案。请帮忙。

Answer 1

ID应该是唯一的并且对于页面来说是单一的。您在页面中使用了两次。添加了一些变化。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，您对多个元素使用相同的ID。这是错的。您应该使用类进行选择。将id='TopMenu'更改为class='TopMenu'。其次，点击＆＃39;功能不是由＆＃39; li＆＃39;元件。你应该倾听＆＃39; a＆＃39;元素的点击功能。

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

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

.hover Works，On Click不会

2 个答案: