0

我一直在修复我的一个朋友的网站，我需要一些帮助。他有一个侧边栏，其中包含一些按如下顺序排列的子菜单：

<ul id="nav">
<div id="nav-scroll">
  <li id="hasnav1"><a href="#">item 1</a>
    <ul id="nav1">
        <li><a href="#">item 1-1</a></li>
        <li><a href="#">item 1-2</a></li>
    </ul></li>
  <li><a href="#">item 2</a></li>
  <li id="hasnav2"><a href="#">item 3</a>
    <ul id="nav2">
        <li><a href="#">item 3-1</a></li>
    </ul</li>
  </div>
</ul>

目前总共有 3 个不同的 hasav id-tags，索引中的 javascript 如下：

<script>
$(document).ready(function(){
$("#hasnav1").hover(function(){
$("#nav1").stop();
$("#nav1").show();
$("#nav1").animate({opacity:1, left:250},500);
},
function(){
$("#nav1").stop();
$("#nav1").animate({left:"0px", opacity:0},400) }); });

</script><script>

$(document).ready(function(){
$("#hasnav2").hover(function(){
$("#nav2").stop();
$("#nav2").show();
$("#nav2").animate({opacity:1, left:250},500);
},
function(){
$("#nav2").stop();
$("#nav2").animate({left:"0px", opacity:0},400)}); });

</script><script>

$(document).ready(function(){
$("#hasnav3").hover(function(){
$("#nav3").stop();
$("#nav3").show();
$("#nav3").animate({opacity:1, left:250},500);
},
function(){
$("#nav3").stop();
$("#nav3").animate({left:"0px", opacity:0},400)}); }); </script>

我必须找到一种方法将此代码合并到一个简单的脚本中，而不是合并到 3 个不同的脚本中，因为我必须在其中再添加 4 个子菜单......

提前致谢。

4

2 回答 2

1

如果你不能改变 HTML，试试这个，只有一个 script标签和一些方法链接，用一个^（以选择器开头）将它压缩成一个方法：

如果您可以更改 HTML，请使用类然后更改hasnav选择器

<script>
    $(function(){
        $("id[^=hasnav]").hover(function(){
            $(this).children("ul").stop().show().animate({opacity:1, left:250},500);
        },
        function(){
            $(this).children("ul").stop().animate({left:"0px", opacity:0},400);
        });
    });
</script>
于 2013-03-27T21:06:26.100 回答
1

第一的。使用类名...这就是它们的用途。

<ul id="nav-main">
  <li class="hasnav"><a href="#">item 1</a>
    <ul class="nav">
        <li><a href="#">item 1-1</a></li>
        <li><a href="#">item 1-2</a></li>
    </ul></li>
  <li><a href="#">item 2</a></li>
  <li class="hasnav"><a href="#">item 3</a>
    <ul class="nav">
        <li><a href="#">item 3-1</a></li>
    </ul>
  </li>
</ul>

有了这个，你可以简化你的代码：

$(function(){
    $(".hasnav").hover(function(){
        $(".nav",this).stop().show().animate({opacity:1, left:250},500);
    },function(){
        $(".nav",this).stop().animate({left:"0px", opacity:0},400)
    }); 
});

对于未来的读者来说，$(".nav",this)就是说“找到一个具有类 'nav' 的元素，它是当前悬停的元素的子元素”。这称为指定选择器的“上下文”。

于 2013-03-27T21:08:58.757 回答