4

我是 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>
4

4 回答 4

2

使用属性选择器^获取所有以给定字符串开头的元素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)参考..

在这里摆弄

于 2013-04-30T10:27:21.567 回答
0

您可以使用上下移动的slideToggle

于 2013-04-30T10:26:26.263 回答
0

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

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

如您所见，我只选择了li'sthat haveul然后使用运算符在其中this进一步查找ulli

于 2013-04-30T10:30:44.857 回答
0

尝试

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

演示：小提琴

于 2013-04-30T10:29:21.043 回答