是否让JavaScript slideToggle在打开另一个目录时关闭活动目录？

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;
}​

参考

Answer 3

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

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

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