0

友人の 1 人の Web サイトを修正していて、助けが必要です。彼には、次のように並べられたいくつかのサブメニューを含むサイド バーがあります。

<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 タグがあり、インデックス内の 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>

さらに 4 つのサブメニューを追加する必要があるため、このコードを 3 つの異なるスクリプトではなく 1 つの単純なスクリプトにマージする方法を見つけなければなりません...

前もって感謝します。

4

2 に答える 2

1

HTML を変更できない場合は、これを試してください。1 つの scriptタグと少しのメソッド チェーンを^(セレクターで始まる) で 1 つのメソッドに凝縮します。

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' を持つ要素を見つけてください」$(".nav",this)と言っています。これは、セレクターの「コンテキスト」を指定することと呼ばれます。

于 2013-03-27T21:08:58.757 に答える