使用下拉菜单的jQuery切换功能遇到问题

我有一个下拉菜单，当切换显示它的菜单项时，上下滑动。问题是，当我在菜单滑下后点击其中一个菜单项时，它被识别为切换，并且菜单向上滑动而不打开菜单项的链接。使用下拉菜单的jQuery切换功能遇到问题

HTML

<li class="dropdown"> 
      <a href="#">Carbohydrates, proteins &amp; fats</a> 
      <ul> 
       <li><a href="carbohydrates.php">Carbohydrates</a></li> 
       <li><a href="proteins.php">Proteins</a></li> 
       <li><a href="fats.php">Fats</a></li> 
      </ul> 
     </li>

下拉脚本：

$(document).ready(function() { 
    $('.dropdown').toggle(
     function() { 
      //show its submenu 
      $('ul', this).slideDown(300); 
     }, 
     function() { 
      //hide its submenu 
      $('ul', this).slideUp(300);   
     } 
    ); 

});

我会很感激任何帮助。

来源

2012-07-29 garethdn

不幸的是上述答案都没有为我工作。不久之后我找到了一个解决方案。

HTML

<li class="dropdown"> 
      <a class="disablelink" href="#">Carbohydrates, proteins &amp; fats</a> 
      <ul class="sub_navigation"> 
       <li><a href="carbohydrates.php">Carbohydrates</a></li> 
       <li><a href="proteins.php">Proteins</a></li> 
       <li><a href="fats.php">Fats</a></li> 
      </ul> 
     </li>

jQuery脚本

$(document).ready(function() { 
     $('.dropdown').click(function() { 
         // When the event is triggered, grab the current element 'this' and 
         // find it's children '.sub_navigation' and display/hide them 
      $(this).find('.sub_navigation').slideToggle(); 
     }); 

     $(".disablelink").click(function(e) { 
      e.preventDefault(); 
     }); 

    });

该解决方案为我工作完美。我在e.preventDefault();中添加了停止页面跳转时，我点击链接。

来源

2012-07-30 13:14:46 garethdn

为什么你单独关闭/打开菜单项？父母<li>元素隐藏时，无论如何都会隐藏 - 为什么在此之后做任何事情？

我想你想要disable event bubbling。

编辑1：你过于复杂的东西。试试这个：

$(document).ready(function() { 
    $('.dropdown').toggle(); 
});

编辑2：您能否具体谈谈你想要什么？如果你想要一个特定的元素，点击后，以控制特定列表中的运动，试试这个：

$(document).ready(function() { 
    $('a.someLink').click(function() { 
     $('.dropdown').toggle(); 
    }); 
});

来源

2012-07-29 21:52:26 hohner

我不确定你的意思？我单独关闭/打开菜单项，因为那正是我想要做的。当你说“为什么在此之后做任何事情”时，我不知道你指的是什么？ – garethdn 2012-07-29 22:02:36

看看我的编辑 – hohner 2012-07-29 22:04:04

我试过这个代码，但它似乎隐藏了我的列表项 - 带有class =“dropdown”的那个。 – garethdn 2012-07-29 22:09:25

尝试移动下拉项

<a href="#" class="dropdown">Carbohydrates, proteins &amp; fats</a> 
<div class="divdropdown"> 
    <ul> 
     <li><a href="carbohydrates.php">Carbohydrates</a></li> 
     <li><a href="proteins.php">Proteins</a></li> 
     <li><a href="fats.php">Fats</a></li> 
    </ul> 
</div>

然后外触发链接稍微修改你的jquery

$(document).ready(function() { 
    $('.dropdown').toggle(
     function() { 
      //show its submenu 
      $('ul', $(".divdropdown")).slideDown(300); 
     }, 
     function() { 
      //hide its submenu 
      $('ul', $(".divdropdown")).slideUp(300);   
     } 
    ); 
});

来源

2012-07-29 21:58:18

使用下拉菜单的jQuery切换功能遇到问题

回答

相关问题