Question

我无法让slideDown功能工作，我无法理解为什么，当我将鼠标悬停在“école”菜单项中时，没有任何反应。

html代码：

<body>
  <div id="background_bleu">
  <div id="global">
  <header> 
    <div id="block_search">
    <img id="search" src="image/search.png"> 
    <input id="input_search" type="search"/>
    <input id="go" type="button" value="Go"/>    <p id="title_search">   
    Advance Search</div>
  <menu id="menu1">
  <ul id="nav"> 
     <li> <a href="#"> Accueil </a> </li>
     <li> <a href="#"> L'école </a>
       **<ul>
          <li> <a href="#"> Qui sommes-nous ? </a></li>
          <li> <a href="#">L'équipe pédagogique </a></li>
          <li> <a href="#">Espace parent </a></li>
          <li> <a href="#">Réglement intérieur </a></li>
          <li> <a href="#">Tarifs </a></li>**
      </ul>
     </li>
     .....

和jQuery代码

$(document).ready(function(){
  $('#menu1 #nav li').hover(function(){
    function(){
        $('ul').slideDown();
    },
    function(){
        $('ul').slideUp(); }
 });
});

Answer 1

请使用此脚本才能正常工作：

$(document).ready(function(){
  $('#menu1 #nav li').hover(function(){
        $('ul', this).stop(true, true).slideDown();
    },function(){
        $('ul', this).slideUp();
    });
});

CSS代码：

#menu1 #nav ul { display: none; }

在使用$('ul', this)的脚本中，它表示事件父级的子ul（悬停）。

Answer 2

您的hover方法调用中包含太多函数。它最多只接受两个函数参数。

此外，您会发现页面上的所有ul元素都会上下滑动。您需要通过查找作为当前ul来电的后代的hover元素进行过滤。

$(document).ready(function() {
  $('#menu1 #nav li').hover(
    function() {
      $(this).find('ul').slideDown();
    },
    function() {
      $(this).find('ul').slideUp();
    }
  );
});

#nav ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<menu id="menu1">
  <ul id="nav">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">L'école</a>
      <ul>
        <li><a href="#">Qui sommes-nous?</a></li>
        <li><a href="#">L'équipe pédagogique</a></li>
        <li><a href="#">Espace parent</a></li>
        <li><a href="#">Réglement intérieur</a></li>
        <li><a href="#">Tarifs</a></li>
      </ul>
    </li>
  </ul>
</menu>

slideDown不起作用

2 个答案: