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 関数で、2 番目の引数は 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 に答える