繁体   English   中英

Bootstrap手风琴切换逻辑

[英]Bootstrap accordion toggle logic

我有一个自举手风琴,在手风琴标题上有两个div。 关闭手风琴时,一个div显示(visiable1)。 另一个显示何时打开手风琴(visiable2)。 FIDDLE

但是问题是当我打开手风琴并再次关闭相同的手风琴visible2 div而不是visible1时出现。 我不确定我犯了什么错误。 我的目标是当手风琴关闭时应显示visible1,而手风琴打开时应显示visible2。 任何帮助都感激不尽。

JS

$('body').on('click', '.list-bar', function() {

  $(".visiable1").slideDown("fast");
  $(".visiable2").slideUp("fast");

  $(this).children(".visiable1").slideUp();
  $(this).children(".visiable2").slideDown();


 });     

进入Bootstrap面板的collapse事件

$(document).on('hidden.bs.collapse shown.bs.collapse', '.panel', function () {
    $(this).find('.visiable1, .visiable2').slideToggle('fast');
});

您遇到的问题是,当单击每个标题时,您不知道该项目是否已切换为打开或关闭。

当前,无论何时单击标题,都会导致visiable2向下滑动,这将使visiable2成为无论显示的内容。

解决此问题的一种方法是将一个类添加到当前打开的元素中,并使用该类来确定是否显示或隐藏标签。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM