在打开另一个div时,是否让JavaScript slideToggle关闭活动div?

在打开另一个div时,是否让JavaScript slideToggle关闭活动div?,javascript,jquery-ui,slidetoggle,Javascript,Jquery Ui,Slidetoggle,以下是我目前的演示: 我知道还有很多其他类似的问题,但是,我无法将它们的语法调整到我的语法,因为每个人的语法都非常不同。以下是我的jQuery: $(".trigger").click(function() { $(this).find('ul.coffeetype').slideToggle(); }); 我想要一种简单、直接的方法来继续为每个div使用相同的类,并且一次只允许打开一个类。当你点击一个已关闭的div时,我希望打开的div滑出视线,而新的div则落在相应的位置 HTML:

以下是我目前的演示:

我知道还有很多其他类似的问题,但是,我无法将它们的语法调整到我的语法,因为每个人的语法都非常不同。以下是我的jQuery:

$(".trigger").click(function() {
$(this).find('ul.coffeetype').slideToggle();
});
我想要一种简单、直接的方法来继续为每个div使用相同的类,并且一次只允许打开一个类。当你点击一个已关闭的div时,我希望打开的div滑出视线,而新的div则落在相应的位置

HTML:


  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性
  • 国际的
  • 区域性

为了演示的目的,现在连续三次都是相同的事情。

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

JS CSS
如果我的理解正确,请参阅:-

JS CSS
请参阅将代码更改为以下内容:

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

此幻灯片显示所有打开的列表先关闭。

将代码更改为以下内容:

$(".trigger").click(function() {
    $('ul.coffeetype').slideUp();
    $(this).find('ul.coffeetype').slideToggle();
});​
$(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();
    });
});
此幻灯片显示所有打开的列表先关闭

$(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)”,因此您仍然可以上下切换相同的菜单

跟踪打开的并在打开活动的前关闭它们


编辑添加了“.not($el)”,这样您仍然可以上下切换相同的菜单。

噢,有没有一种方法可以让用户再次单击打开的滑块的触发器以将其关闭并将其移开,同时保留您为其他滑块提供的功能?现在,如果您这样做,打开列表将上下切换,但我希望将打开列表与上述行为分开作为目标。@Betafresh Media-您只需将“.not(…)”添加到“opened”选择器中。这与我描述的完全相同,除非您有一个下拉列表,然后将其上下切换,然后删除另一个,这两个列表同时向下滑动,陷入了一个无休止的循环,无法同时关闭所有列表。@Betafresh Media-您只需遵循逻辑即可。。。将add/removeClass切换为toggleClass解决了这个问题。感谢您容忍我的Javascript文盲,您是一个救生员Roh,是否有一种方法,用户可以再次单击打开滑块的触发器,将其关闭并将其清除,同时保留您为其他滑块提供的功能?现在,如果您这样做,打开列表将上下切换,但我希望将打开列表与上述行为分开作为目标。@Betafresh Media-您只需将“.not(…)”添加到“opened”选择器中。这与我描述的完全相同,除非您有一个下拉列表,然后将其上下切换,然后删除另一个,这两个列表同时向下滑动,陷入了一个无休止的循环,无法同时关闭所有列表。@Betafresh Media-您只需遵循逻辑即可。。。将add/removeClass切换为toggleClass解决了这个问题。谢谢你容忍我的Javascript文盲,你是个救命恩人
$(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();
    });
});