1

ドロップダウンメニューをデザインしましたが、正常に機能しています。これが私のコードです。ここで私のコードを確認することもできます。

html

<div class="menu_option" id="hover-detail"><img src="images/menu_option_icon.jpg" alt=" " width="14" height="14" align="right" /> Menu Option



      <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 1</a></li>
      </ul>

                      </div>

Jquery

$(document).ready(function() {
    var Dropdown = {
        timer: 0,
        hide: function(callback, delay){
            console.log("hide");
            this.timer = setTimeout(function() {
                return callback.call(this, arguments);
        }, delay);
        },
        reset: function(){
            console.log("reset");
            this.timer && clearTimeout(this.timer);
        }
    };
    $('#hover-detail ul').css('display', 'none');
    $('#hover-detail').hover(function() {
        Dropdown.reset();
        $('#hover-detail ul').css({
            position: 'absolute',
            top: '20px',
            left: '0px',
            zindex: '99999'
        });
        $('#hover-detail ul').slideDown();
    }, function() {
        Dropdown.hide(function(){
            $('#hover-detail ul').slideUp()
        }, 200);
    });
    $('#hover-detail').hover(function() {
        Dropdown.reset();
    }, function(){
        Dropdown.hide(function(){
            $('#hover-detail ul').slideUp()
        }, 200);
    });
})

CSS

#hover-detail ul 
    {
        margin:0;
        padding:0;
        border:solid 1px #666;
        border-bottom:none;

        }
    #hover-detail ul li
    {
        list-style:none;
        margin:0;
        padding:0;
        display:inline;

        }
    #hover-detail ul li a
    {
        text-decoration:none;
        color:#333;
        padding:2px 50px 2px 10px;
        background:#F0F0F0;
        border-bottom:1px solid #666;
        /*line-height:25px;*/
        font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
        text-transform:capitalize;
        display:block;
        }
    #hover-detail ul li a:hover
    {
        background:#CCC;
        }

問題は、このドロップダウン効果をページで再び使用すると、機能しないことです。http://jsfiddle.net/avKsT/2/を確認できます。

4

2 に答える 2

2

ID属性は一意である必要があります。複数のhtmlタグに同じIDを使用することはできません。クラスセレクターを使用できます。

コードを更新します。これを確認できます。http://jsfiddle.net/avKsT/17/

$(document).ready(function() {
    var Dropdown = {
        timer: 0,
        hide: function(callback, delay){
            console.log("hide");
            this.timer = setTimeout(function() {
                return callback.call(this, arguments);
        }, delay);
        },
        reset: function(){
            console.log("reset");
            this.timer && clearTimeout(this.timer);
        }
    };
    $('.hover-detail ul').css('display', 'none');
    $('.hover-detail').hover(function() {
        Dropdown.reset();
        $('#hover-detail ul').css({
            position: 'absolute',
            top: '20px',
            left: '0px',
            zindex: '99999'
        });
        $(this).children('ul').slideDown();
    }, function() {
        $(this).children('ul').slideUp();
    });
})​
于 2012-04-16T07:24:34.527 に答える
1

Dom要素IDは一意である必要があります。ドロップダウンを再度使用するときは、同じID「hover-details」を持つ別の要素を挿入します。2番目のIを他の何かに変更するか、ロジックセレクターとしてクラスを使用します。

于 2012-04-16T07:24:15.960 に答える