仅在上一个元素关闭后才滑动div

Question

我目前有以下设置：（所有具有“秘密”类的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

您的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');        
});

小提琴

Answer 2

由于您使用的是JQuery，请使用其BuildIn函数来折叠手风琴http://jqueryui.com/accordion/

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