.hover Works，點擊並不是

所以這已經引起了我很多頭痛。我正在製作「下拉式手風琴子菜單」（缺乏更好的名稱）。我的腳本可以使用，但只能在HOVER上使用。如果我嘗試使用.click，.on（「click」），.on（「click」，「li」）等等。該腳本僅在使用.hover時有效。.hover Works，點擊並不是

注意！這只是應該有點擊事件的「#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

我在此將堅果，我已經搜索了高和低的解決方案。請幫忙。

來源

2016-08-26 XanderMan

您是否也可以添加HTML標記以用於演示目的？ – guradio

您的「工作測試」似乎不起作用 – Tibrogargan

對於一個頁面，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>

來源

2016-08-26 06:49:32

嗨，感謝您的意見。我看到我在這裏有點偏離。但是，如果我知道決定讓子菜單隻在點擊打開？一起去除懸停？ – XanderMan

首先使用的是同一個ID的多個元素。這是錯誤的。您應該使用班級進行選擇。將id='TopMenu'更改爲class='TopMenu'。其次，「點擊」功能不是用'li'元素觸發的。你應該聽'a'元素的點擊功能。

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

我不熟悉slideDown和slideUp函數，但您可以從那裏繼續。不要忘記$(this)元素是指<a href="#" class="menu_heading" rel="menu_heading">CLICK ME</a>這個點擊功能。

來源

2016-08-26 06:51:51 Qsprec

.hover Works，點擊並不是

回答

相關問題