Question

以下是我到目前为止的演示：http://www.betafreshmedia.com/nathan/coffee.html

我知道还有很多这样的问题，但是，我不能让他们的语法适应我的，因为每个人的情况都差别很大。这是我的jQuery：

$(".trigger").click(function() {
$(this).find('ul.coffeetype').slideToggle();
});

我想要一种最小，直接的方式继续为每个div使用相同的类，并且一次只允许打开一个。当你点击一个关闭的div时，我希望打开的一个滑出视线，然后新的一个滑落到各自的位置。

HTML：

<div class="trigger">
<img src="images/coffeetype1.png" />
<ul class="coffeetype">
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
</ul>
</div>
<div class="trigger">
<img src="images/coffeetype1.png" />
<ul class="coffeetype">
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
</ul>
</div>
<div class="trigger">
<img src="images/coffeetype1.png" />
<ul class="coffeetype">
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
</ul>
</div>

现在，为了演示目的，它连续三次出现同样的事情。

Answer 1

$(document).ready(function() {
    $(".trigger").click(function() {
        var $el = $(this).find('ul.coffeetype');
        var $opened = $('.toggledDown').not($el);
        $opened.toggleClass('toggledDown');
        $opened.slideToggle();
        $el.toggleClass('toggledDown');
        $el.slideToggle();
    });
});

在打开活动的那些之前跟踪那些打开并关闭它们。

编辑添加了“.not（$ el）”，因此您仍然可以上下切换相同的菜单。

Answer 2

如果我的理解是正确的： -

JS

$(".trigger").hover(function() {
   $(this).find('.coffeetype').slideToggle();
});

CSS

.coffeetype {
    display: none;
}

参考 LIVE DEMO

Answer 3

将您的代码更改为以下内容：

$(".trigger").click(function() {
    $('ul.coffeetype').slideUp();
    $(this).find('ul.coffeetype').slideToggle();
});

这将首先关闭所有打开的列表。

获取JavaScript slideToggle以打开另一个时关闭活动div？

3 个答案:

JS

CSS