如何为这样的下拉菜单使用 jQuery 的缩短版本？答案

【问题标题】：How do I use a shortened version of jQuery for a dropdown menu like this?如何为这样的下拉菜单使用 jQuery 的缩短版本？
【发布时间】：2013-04-24 05:39:44
【问题描述】：

我是 jQuery 新手，仍在学习如何编写语言脚本。我最近尝试在下拉菜单上工作，但我觉得我在代码中做错了什么，或者更重要的是，我觉得语言专家可以编写比我拥有的更少的代码行。你能帮帮我吗？我的代码如下所示：

HTML

<ul id="menu">
    <li><a href="">HOME</a></li>
    <li id="li_1"><a href="">PRODUCTS</a>
        <ul id="dropdown_1">
            <li><a href="">Product 1</a></li>
            <li><a href="">Product 2</a></li>
            <li><a href="">Product 3</a></li>
            <li><a href="">Product 4</a></li>
            <li><a href="">Product 5</a></li>
        </ul>
    </li>        
    <li id="li_2"><a href="">SERVICES</a>
        <ul id="dropdown_2">
            <li><a href="">Service 1</a></li>
            <li><a href="">Service 2</a></li>
            <li><a href="">Service 3</a></li>
            <li><a href="">Service 4</a></li>
            <li><a href="">Service 5</a></li>
        </ul>
    </li>        
</ul>

jQuery

<script type="text/javascript">

var slide_down_1 = function() {
    $('#dropdown_1').slideDown(300);
}

var slide_up_1 = function() {
    $('#dropdown_1').stop(true, true).slideUp(300);
}

$('#li_1').mouseenter(slide_down_1);
$('#li_1').mouseleave(slide_up_1);

var slide_down_2 = function() {
    $('#dropdown_2').slideDown(300);
}

var slide_up_2 = function() {
    $('#dropdown_2').stop(true, true).slideUp(300);
}

$('#li_2').mouseenter(slide_down_2);
$('#li_2').mouseleave(slide_up_2);


</script>

【问题讨论】：

标签： jquery html drop-down-menu

【解决方案1】：

使用带有^ 的属性选择器获取所有以给定字符串开头的元素。hover() mouseenter() 和 mouseleave() 的简写，第一个参数是 mouseenter 函数，第二个是 mouseleave 函数。

试试这个

$('li[id^="li"]').hover(function(){
   $(this).find('ul').slideDown();
},function(){
  $(this).find('ul').stop(true, true).slideUp();
});

这将适用于所有 <li> 标记.. 而不是为每个 li 创建单独的函数.. 为所有 <li> 调用悬停函数并使用 $(this) 参考..

fiddle here

【讨论】：

【解决方案2】：

你可以使用slideToggle，它可以上下移动

【讨论】：

【解决方案3】：

试试

$('#menu > li:has(ul)').hover(function(){
   $(this).find('ul').slideDown();
},function(){
  $(this).find('ul').slideUp();
});

演示：Fiddle

【讨论】：

【解决方案4】：

是的，如果您正确理解选择器，您可以减少代码行数。

$('li:has(ul)').mouseenter(function(){
   $('ul', this).slideDown(300);
}).mouseleave(function(){
   $('ul', this).stop(true, true).slideUp(300);
});

如您所见，我只选择了具有ul 的li's，然后使用this 运算符在li 中进一步查找ul

【讨论】：

谢谢 Umair。我还想知道为此我需要学习这本书的哪一部分。您安排代码的方式非常容易理解
很高兴为您提供帮助。我不确定你在说哪本书。顺便说一句，我在 StackOverFlow 上研究了这一切。
哇，太棒了。我只是碰巧在网上的网站上碰到了这个网站，然后就爱上了这个概念。我的目标是与外面的人联系并分享想法。希望我们在这里联系更多......