如何在这样的下拉菜单中使用缩短版的jQu​​ery？

2019年8月4日 188次阅读

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

最佳答案 使用^的属性选择器获取所有以给定字符串开头的元素..用于mouseenter()和mouseleave()的hover()简写,第一个参数是mouseenter函数,第二个参数是mouseleave函数.

试试这个

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

这将适用于所有< li> tag ….而不是为每个li …创建单独的函数.为所有< li>调用hover函数并使用$(this)引用..

fiddle here

点赞