高亮李<a>子菜單的使用jQuery

我編碼如下下拉菜單：高亮李<a>子菜單的使用jQuery

<ul id="main_menu"> 
    <li class="enter-top-level"> 
     <a href="#entering"> 
      Enter Data 
      <ul id="enter_scheme_global"> 
       <li class='submenu'> 
        <a href="#enter_scheme"> 
         Scheme Details 
        </a> 
       </li> 
       <li class='submenu'> 
        <a href="#enter_transformer"> 
         Transformer 
        </a> 
       </li> 
       <li class='submenu'> 
        <a href="#enter_AIS"> 
         AIS 
        </a> 
       </li> 
       <li class='submenu'> 
        <a href="#enter_GIS"> 
         GIS 
        </a> 
       </li> 
      </ul> 
     </a> 
    </li>

我想給它使用jQuery一個動畫了slideDown和效果基本show效果，我試過如下：

$('a').mouseenter(function() { 
    $(this).find('ul').slideToggle(500); 
    $(this).parent('.submenu').css({"background-color" : "#700000"}); 
});//end $('a').hover function*/ 

$('a').mouseout(function() { 
    $(this).find('ul').fadeToggle(500); 
    $(this).parent('.submenu').css({"background-color" : "#C8C8C8"}); 
});//end $('a').hover function*/

但沒有成功。任何幫助任何人。

來源

2015-11-30 Sukalyan Ghoshal

代碼有幾個問題。

首先，您的HTML需要更改。您的頂級a標籤包裝了所有元素，這會導致子元素a無用。您也不需要爲mouseover/mouseout分配兩個功能。您可以使用hover()方法。此外，定位父li將允許菜單保持打開狀態，因爲鼠標仍然處於打開狀態（而不是a元素）。這裏是工作代碼：

小提琴： http://jsfiddle.net/xf02743m/1/

HTML

<ul id="main_menu"> 
    <li class="enter-top-level"><a href="#entering">Enter Data</a> 

     <ul id="enter_scheme_global"> 
      <li class='submenu'><a href="#enter_scheme">Scheme Details</a> 

      </li> 
      <li class='submenu'><a href="#enter_transformer">Transformer</a> 

      </li> 
      <li class='submenu'><a href="#enter_AIS">AIS</a> 

      </li> 
      <li class='submenu'><a href="#enter_GIS">GIS</a> 

      </li> 
     </ul> 
    </li>

CSS - 隱藏子菜單第一

#enter_scheme_global { 
    display:none; 
}

jQuery的

$(".enter-top-level").hover(function() { 
    $(".enter-top-level ul").slideDown("slow"); 
    $(this).parent().css({"background-color" : "#700000"}) 
}, function(){ 
    $(".enter-top-level ul").slideUp("slow"); 
    $(this).parent().css({"background-color" : "#C8C8C8"}); 
});

來源

2015-11-30 23:09:41 disinfor

這麼多的感謝。而已。再次感謝。 –

@SukalyanGhoshal - 如果這已解決您的問題，請將此帖標記爲答案。 –

@SuckalyanGhoshal Lee Taylor說，如果這解決了您的問題，請將其標記爲接受的答案。這將有助於未來的遊客。謝謝。 – disinfor

試試這個：

$("a").hover(
    function() { 
    $(this).next('ul').slideToggle(500); // 'next' finds the next occurring element to the current 'a' tag 
    $(this).next('ul').find('.submenu').css({"background-color" : "#700000"}); 
    }, function() { 
    $(this).next('ul').slideToggle(500); 
    $(this).next('ul').find('.submenu').css({"background-color" : "#C8C8C8"}); 
    } 
);

工作例如：https://jsfiddle.net/9882acxn/4/

來源

2015-11-30 23:26:04 DinoMyte

高亮李<a>子菜單的使用jQuery

回答

相關問題