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”的元素。将第二个 Id 更改为其他内容或使用类作为您的逻辑选择器。

于 2012-04-16T07:24:15.960 回答