Javascript jQuery定制手风琴，无法'；不要让它可折叠

我有一个定制的手风琴，比如jQuery UI手风琴。我还试图使任何扩展项可折叠（如果再次单击）。大概是这样的： 但是我不知道如何在当前展开的项目上捕获另一个单击事件。有人能给我指一下正确的方向吗

    <div class="dropdown">
        <div class="style1 dropdown-link" style='background-color: rgb(75, 78, 80);'>Timecard Error Message</div>
        <div class="style2 dropdown-container" style="display: none">
            <div class="ExternalClassA37E015771DB4A43AFAA85E21F07E758">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
</p>
            </div>
        </div>
    </div>
    <div class="dropdown">
        <div class="style1 dropdown-link" style="background-color: rgb(84, 88, 90);">Worklist Emails</div>
        <div class="style2 dropdown-container" style="display: none;">
            <div class="ExternalClassA7D39E7BCBCE48A791E0F84E3631CC00">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!

            </div>
        </div>
    </div>

---

这里是jsbin:

使用JavaScript来更改很多样式并不是一个好主意，而您只需使用css即可。当

下拉列表处于活动状态时，应仅在其上包含一个类。下面是我将所有样式移到css的示例代码：


$（文档）.ready（函数（）{
$（'div.dropdown'）。每个（函数（）{
var$下拉列表=$（此）；
var$dropdownLink=$dropdown.find（'.dropdownLink'）；
$dropdownLink.单击（功能（e）{
e、 预防默认值（）；
var currentBlock=$（this）.closest（'.dropdown'）；
if（currentBlock.hasClass（'slide-active'））{
currentBlock.removeClass（“滑动激活”）；
}否则{
$（'div.dropdown'）.removeClass（'slide-active'）；
currentBlock.addClass（'slide-active'）；
}
});
});
});
。下拉链接{
背景#54585a；
}
.下拉式容器{
显示：无；
}
.幻灯片处于活动状态.下拉列表容器{
显示：块；
}
.幻灯片处于活动状态.下拉链接{
边框底部：1px点白色；
背景：#4b4e50；
}

时间卡错误消息
Lorem ipsum dolor sit amet，奉献精英。在共和国的智者身上，真正的权利是平等的，这是一个伟大的目标！

工作列表电子邮件
Lorem ipsum dolor sit amet，奉献精英。在共和国的智者身上，真正的权利是平等的，这是一个伟大的目标！
无法输入未来的时间卡
Lorem ipsum dolor sit amet，奉献精英。在共和国的智者身上，真正的权利是平等的，这是一个伟大的目标！
使用JavaScript更改许多样式并不是一个好主意，而您只需使用css即可。当
下拉列表处于活动状态时，应仅在其上包含一个类。下面是我将所有样式移到css的示例代码：


$（文档）.ready（函数（）{
$（'div.dropdown'）。每个（函数（）{
var$下拉列表=$（此）；
var$dropdownLink=$dropdown.find（'.dropdownLink'）；
$dropdownLink.单击（功能（e）{
e、 预防默认值（）；
var currentBlock=$（this）.closest（'.dropdown'）；
if（currentBlock.hasClass（'slide-active'））{
currentBlock.removeClass（“滑动激活”）；
}否则{
$（'div.dropdown'）.removeClass（'slide-active'）；
currentBlock.addClass（'slide-active'）；
}
});
});
});
。下拉链接{
背景#54585a；
}
.下拉式容器{
显示：无；
}
.幻灯片处于活动状态.下拉列表容器{
显示：块；
}
.幻灯片处于活动状态.下拉链接{
边框底部：1px点白色；
背景：#4b4e50；
}

时间卡错误消息
Lorem ipsum dolor sit amet，奉献精英。在共和国的智者身上，真正的权利是平等的，这是一个伟大的目标！

工作列表电子邮件
Lorem ipsum dolor sit amet，奉献精英。在共和国的智者身上，真正的权利是平等的，这是一个伟大的目标！
无法输入未来的时间卡
Lorem ipsum dolor sit amet，奉献精英。在共和国的智者身上，真正的权利是平等的，这是一个伟大的目标！
避免在javascript中设置
样式，这将是一种不好的做法

这是你想要的片段


$（文档）.ready（函数（）{
$（'div.dropdown'）。每个（函数（）{
var$下拉列表=$（此）；
$（“.dropdownlink”，$dropdown）。单击（函数（e）{
e、 预防默认值（）；
var parent_drop=$（this）.closest（“.dropdown”）；
如果（$（父项放置）.is（“.open”））{
$（parent_drop）.removeClass（“打开”）；
$（“div.dropdown-container”）.css（'display'，'none'）；
}否则{
$（parent_drop）.addClass（“打开”）；
$（“div.dropdown-link”）.css（'background-image'，''）；//重置背景以便css背景接管
$（“div.dropdown-container”）.css（'display'，'none'）；
$（“div.dropdown-link”）.css（'background-color'，'#54585a'）；
$（“div.dropdown-link”）.css（'border'，'none'）；
if（$（$div.dropdown-container，$dropdown）.css（'display'，'none'））{
$（'div.dropdown-link'，$dropdown）.css（'background-color'，'#4b4e50'）；
$（$div.dropdown-link，$dropdown）.css（{'border-bottom'：'1px点白色'，'border-top'：'1px点白色'）；
$（“div.dropdown-container”，$dropdown）.css（'display'，'inline-block'）；
$（$div.dropdown-link“，$dropdown）.css（'background-image'，'url（“/SiteAssets/arrowdown.png”）；
}否则{
$（$div.dropdown-link“，$dropdown）.css（'background-image'，'url（“/SiteAssets/img/arrow.png”））；
$（“div.dropdown-container”，$dropdown）.css（'display'，'none'）；
$（“div.dropdown-link，$dropdown）.css（'background-color'，'#54585a'）；
$（“div.dropdown-link，$dropdown）.css（'border'，'none'）；
$(document).ready(function(){
     $('div.dropdown').each(function() {
      var $dropdown = $(this);      
      $(".dropdown-link", $dropdown).click(function(e) {
        e.preventDefault();
        $("div.dropdown-link").css('background-image',''); //reset the background so CSS Background takes over
        $("div.dropdown-container").css('display','none');
        $("div.dropdown-link").css('background-color','#54585a');
        $("div.dropdown-link").css('border','none');
          if($("div.dropdown-container", $dropdown).css('display','none')){
              $("div.dropdown-link", $dropdown).css('background-color','#4b4e50');
              $("div.dropdown-link", $dropdown).css({'border-bottom':'1px dotted white', 'border-top':'1px dotted white'});
              $("div.dropdown-container", $dropdown).css('display','inline-block');
              $("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/arrowdown.png")');
          }else{
              $("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/img/arrow.png")');
              $("div.dropdown-container", $dropdown).css('display','none');
              $("div.dropdown-link", $dropdown).css('background-color','#54585a');
              $("div.dropdown-link", $dropdown).css('border', 'none');
          }
        return false;
      });
   });
});