Question

我设计了一个下拉菜单，它运行正常。这是我的代码，您还可以查看我的代码here。

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/。

Answer 1

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();
    });
})

Answer 2

Dom元素ID必须是唯一的。当您再次使用下拉列表时，您插入另一个具有相同ID＆＃34; hover-details＆＃34;的元素。将第二个我更改为其他内容或使用类作为逻辑选择器。

ID无法再次运行jQuery

2 个答案: