Question

我有jquery代码

$("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

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

谢谢

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>

Check fiddle

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

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

jquery div在bootstrap中崩溃/扩展

3 个答案: