jquery div 折叠/展开在引导中

Question

I have jquery code

$("a.tabs").click(function (e) {
   var $groupName = $(this).data("group");
    $("[data-group='" + $groupName + "']").each(function () {
      $($(this).data("target")).addClass('collapse').removeClass("in");
    });
});

展开div 并折叠其他：

<div class="container">
<div class="row">
  <div>
            <div>
                <a data-target="#fm1" class="tabs" data-group="footer-blocks" data-toggle="collapse">Link1</a>
            </div>
            <div id="fm1" class="collapse show-in-md">
                Link1 content     
            </div>
   </div>
    <div>
            <div>
                <a data-target="#fm2" class="tabs" data-group="footer-blocks" data-toggle="collapse">Link2</a>
            </div>
            <div id="fm2" class="collapse show-in-md">
                Link2 content     
            </div>
   </div>
    <div>
            <div>
                <a data-target="#fm3" class="tabs" data-group="footer-blocks" data-toggle="collapse">Link3</a>
            </div>
            <div id="fm3" class="collapse show-in-md">
                Link3 content     
            </div>
   </div>
</div>
</div>

问题，当我单击锚点并展开div 时，如果我再次单击它，它不会折叠。你能给我一些如何修复jquery代码的提示吗？我知道这很简单，但我尝试了几件事，但我无法完成。

在这里你可以找到工作示例：http://www.bootply.com/JdX7qe6QkG

而且，是的，我知道这是引导程序，我可以使用手风琴类等，但我想以其他方式做。

谢谢

Answer 1

这是我

的看法：

将类删除更改为此

$(this).data("target").toggleClass('collapse').toggleClass("in");

它将在类之间来回切换以显示/折叠目标

更新

如果项目已展开，再次单击它将折叠它。 所有未单击的项目也将折叠。

$(function() {
  $("a.tabs").click(function(e) {
    var target = $(this).data("target");
    var isTargetExpanded = $(target).hasClass('in');
    $('.show-in-md').addClass('collapse').removeClass('in'); // collapse all before expading clicked target
    if (isTargetExpanded) {
      $(target).addClass('collapse').removeClass("in"); // collapse clicked target
    } else {
      $(target).removeClass('collapse').addClass("in"); // expand clicked target
    }
  });
});

.tabs {
  display: block;
  padding: 10px;
  background: #4a4a4a;
  margin-bottom: 2px;
  color: #fff;
}
.tabs:hover {
  color: #aaa;
  font-weight: bold;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div>
      <div>
        <a data-target="#fm1" class="tabs" data-group="footer-blocks" data-toggle="collapse">Link1</a>
      </div>
      <div id="fm1" class="collapse show-in-md">
        Link1 content
      </div>
    </div>
    <div>
      <div>
        <a data-target="#fm2" class="tabs" data-group="footer-blocks" data-toggle="collapse">Link2</a>
      </div>
      <div id="fm2" class="collapse show-in-md">
        Link2 content
      </div>
    </div>
    <div>
      <div>
        <a data-target="#fm3" class="tabs" data-group="footer-blocks" data-toggle="collapse">Link3</a>
      </div>
      <div id="fm3" class="collapse show-in-md">
        Link3 content
      </div>
    </div>
  </div>
</div>

Answer 2

你可以试试这个：

$("a.tabs").click(function (e) {
    var $groupName = $(this).data("group"),
        targetDiv = $($(this).data('target'));
    $(this).closest(".collapsible-container").find(".collapsible").not(targetDiv).addClass('collapse');
    $(targetDiv).toggleClass('collapse');
});

并添加另一个类来轻松识别可折叠的div，如下所示：

<div class="container">
<div class="row collapsible-container">
    <div>
        <div>
            <a data-target="#fm1" class="tabs" data-group="footer-blocks" data-toggle="collapse">Link1</a>
        </div>
        <div id="fm1" class="collapsible collapse show-in-md">
            Link1 content
        </div>
    </div>
    <div>
        <div>
            <a data-target="#fm2" class="tabs" data-group="footer-blocks" data-toggle="collapse">Link2</a>
        </div>
        <div id="fm2" class="collapsible collapse show-in-md">
            Link2 content
        </div>
    </div>
    <div>
        <div> <a data-target="#fm3" class="tabs" data-group="footer-blocks" data-toggle="collapse">Link3</a>
        </div>
        <div id="fm3" class="collapsible collapse show-in-md">
            Link3 content
        </div>
    </div>
</div>

检查小提琴

Answer 3

我想我已经得到了它（HTML 没有更改）：

$("a.tabs").click(function (e) {
  e.preventDefault();
  var $groupName = $(this).data("group");
  var $this = $(this);
  $("[data-group='"+ $groupName +"']:not([data-target='" + $this.data("target") + "'])").each(function () {
    $($(this).data("target")).removeClass("in").addClass('collapse');
  });
});

示例：http://www.bootply.com/EPbRaKhVtB

你认为这是最干净的吗？也许你会改进它？谢谢。