Slidetoggle div 仅在前一个元素关闭后

Question

我目前有以下设置：（所有 class 为 "secret" 的 div 都被隐藏）

<div class="row">
    <div class="block align">
        <a class="desktop" data-toggle-target="click-1">
        </a>
    <div>
    <div class="block align">
        <a class="desktop" data-toggle-target="click-2">
        </a>
    <div>
<div>
<div class="row">
    <div id="click-1" class="secret">
        stuff
    <div>
    <div id="click-2" class="secret">
        stuff
    <div>
<div>
<div class="row">
    <div class="block align">
        <a class="desktop" data-toggle-target="click-3">
        </a>
    <div>
    <div class="block align">
        <a class="desktop" data-toggle-target="click-4">
        </a>
    <div>
<div>
<div class="row">
    <div id="click-3" class="secret">
        stuff
    <div>
    <div id="click-4" class="secret">
        stuff
    <div>
<div>

我使用以下内容一次滑动切换一个

$('.align .desktop').click(function (e) {
    $( '#' + $(this).data('toggleTarget') ).slideToggle(300).toggleClass('open');        
});

问题是，如果我点击 data-toggle-target="click-2" 打开相应的 div，我需要先关闭任何其他打开的 div ，则有相应的div slideToggle

Answer 1

因为你使用 JQuery 使用他们的手风琴内置函数 http://jqueryui.com/accordion/

更新：或者为您的 Structur 编写一个函数，该函数首先关闭所有块，然后再打开单击的块。

Answer 2

您的 HTML 结构不适合此类事情，但将一系列选择器链接在一起可以实现此目的：

$('.align .desktop').click(function (e) {
   var target = $(this).data('toggleTarget');
   $( '#' + target).siblings(".secret").slideUp().end().closest(".row").siblings(".row").find(".secret").slideUp().end().end().end().slideToggle(300).toggleClass('open');        
});

FIDDLE

Slidetoggle div 仅在前一个元素关闭后

Slidetoggle div only after previous element has close

html

javascript

jquery

slidetoggle