0

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

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

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

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

    });
})();
4

2 回答 2

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();
    });
});
于 2013-08-09T21:38:32.077 回答
0

您实际上可以做一个纯 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将生效。

瞧。

于 2013-08-09T21:13:11.137 回答