Question

我有一个简单的jQuery下拉列表：http://jsfiddle.net/7ZVb7/1213/

我想要实现的是，如果“更多”按钮悬停，下拉菜单将会滑动，如果光标离开“更多”或下拉，它将会滑动。

但是，如果我添加另一个事件以便在单击任何下拉菜单时，整个下拉菜单应该是slideUp，它就不起作用了。由于某种原因，它还会触发“悬停”效果，使下拉菜单一直闪烁。

HTML：

<div id="table">
<div class="container">
                        <a href="#" class="smallRedButton manage">More</a>
                        <div class="hidden list">
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                            </ul>
                        </div>
                    </div>
</div>

jQuery的：

$(function() {
    $('#table').on('hover', '.container', function(event) {
        console.log('hover');
        $(this).find('div').slideToggle(100);
            event.preventDefault();
    });

    $('#table').on('click', '.container li', function(event) {
         $(this).parents(".list").slideUp('slow').show();

    });
})();

Answer 1

也许这就是你想要的：DEMO

$(function() {
    $('#table').on('mouseover', '.manage', function() {
        $(this).siblings('div').slideDown('slow');
    }).on('mouseleave', '.container', function(event) {
        $(this).find('div').slideUp('slow');
    });

    $('#table').on('click', '.container li', function() {
        $(this).parents(".list").slideUp('slow').show();
    });
});

Answer 2

你实际上可以做一个纯粹的CSS解决方案：

小提琴：http://jsfiddle.net/nGqsQ/1/

HTML

<div class="dropdown-container">
   <a href="#" class="handle">More</a>
   <div class="dropdown">
       <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
       </ul>
   </div>
</div>

CSS

.dropdown-container {
    width: 150px;
}

.dropdown-container .dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s;
}

.dropdown-container .dropdown:hover,
.dropdown-container .handle:hover + .dropdown {
    max-height: 200px;
}

.dropdown-container .dropdown ul {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

.dropdown-container .dropdown ul li {
    padding: 5px 10px;
    color: #0061a7;
}

.dropdown-container .dropdown ul li:hover {
    background-color: #0061a7;
    color: #ffffff;
}

编辑：dropdown-container是可选的，但我喜欢把东西包起来分组

EDIT2：忘了解释一下...... 主要部分是：

.dropdown-container .dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s;
}

.dropdown-container .dropdown:hover,
.dropdown-container .handle:hover + .dropdown {
    max-height: 200px;
}

此处，.dropdown默认设置为max-height: 0，因此不会在屏幕上显示。

然后，如果您将鼠标悬停在.handle上，则规则.handle:hover + .dropdown将匹配并设置max-height: 200px，您可以将其更改为您想要的任何内容，只要它大于实际高度（精确值是更好看的动画的首选）。如果您更改为将鼠标悬停在.dropdown上，则.dropdown-container .dropdown:hover规则将生效。

瞧。

jQuery - 即使它不应该触发悬停

2 个答案: