只有在前一个元素关闭后才能切换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>

我每次slideToggle一次，如下所示

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

问题是，如果我单击数据切换- slideToggle =“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');        
});

FIDDLE

Answer 2

由于您使用JQuery，所以使用它们的BuildIn函数作为手风琴http://jqueryui.com/accordion/

UPDATE:或者为您的Structur编写一个函数，它先关闭所有块，然后打开单击的块。