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

Question

这是到目前为止我所拥有的演示： http : //www.betafreshmedia.com/nathan/coffee.html

我知道还有很多其他这样的问题，但是，由于每个人的语法都大不相同，因此我无法适应他们的语法。 这是我的jQuery：

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

我想要一种简单的直接方法，继续为每个div使用相同的类，并且一次只能打开一个。 当您单击关闭的div时，我希望打开的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();
});​

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