Question

我有几个可折叠的按钮。当我单击其中一个时，其他人会折叠其内容，因此一次只能显示一个内容。问题是，当我第二次单击非折叠按钮时，它隐藏了它们的内容，留下了空白。

我有这个HTML：

<div class="flex-colum" id="btons">
     <button type="button" class="btn btn-bg-md btn-outline-primary active" data-toggle="collapse" data-target="#coll1" aria-pressed="false" autocomplete="off" id="btn1">Button 1</button>
     <button type="button" class="btn btn-bg-md btn-outline-primary" data-toggle="collapse" data-target="#coll2" aria-pressed="false" autocomplete="off" id="btn2">Button 2</button>                                
</div>                                                                
<div class="container">
     <div class="collapse show" data-parent="#section_four" id="coll1">
          <div class="container">
          <h1>Hello im conllapse 1</h1>
          </div>
     </div>
     <div class="collapse show" data-parent="#section_four" id="coll2">
          <div class="container">
          <h1>Hello im conllapse 2</h1>
          </div>                                                    
     </div>
</div>

我该怎么做：

打开页面并显示内容时，Btn1必须处于活动状态。
如果我单击btn2，则btn1折叠，而Btn2显示内容。
如果我再次单击同一按钮（显示其内容的按钮），它什么也不做。

我已经尝试过了：

$('#btons').on('click', '.btn', function() {
     $(this).addClass('active').siblings().removeClass('active');
     $('#btons').find('.collapse').collapse('hide');   
});

我还尝试将按钮设置为无效（如果处于活动状态），并设置为hasClass活动。

如果该按钮处于活动状态，我该怎么做才能始终显示内容？有什么想法吗？

Answer 1

如果您正在使用引导程序4，那么为什么要使用多次折叠的自定义代码。已经有用于完成您想要的操作的导航丸组件。

遵循以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
</style>
</head>
<body>
  <div class="container">
    <ul class="nav nav-pills" role="tablist">
      <li class="nav-item">
        <button type="button" class="btn btn-bg-md btn-outline-primary nav-link active" data-toggle="pill" href="#home">button 1</button>
      </li>
      <li class="nav-item">
        <button type="button" class="btn btn-bg-md btn-outline-primary nav-link" data-toggle="pill" href="#menu1">button 2</button>
      </li>
      <li class="nav-item">
        <button type="button" class="btn btn-bg-md btn-outline-primary nav-link" data-toggle="pill" href="#menu2">button 3</button>
      </li>
    </ul>
    <div class="tab-content">
      <div id="home" class="container tab-pane active"><br>
        <h3>Button 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu1" class="container tab-pane fade"><br>
        <h3>Button 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu2" class="container tab-pane fade"><br>
        <h3>Button 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</body>
</html>

谢谢...

Answer 2

我想我了解您要做什么：尝试用以下代码替换您的JavaScript：

$('#btons').on('click', '.btn', function() {
    var id = $(this).attr("data-target");
    if ($(id).hasClass("show")) {
        return false;
    }
    $(".collapse").removeClass("show").addClass("hide");

    setTimeout(function() {
        $(id).removeClass("hide").addClass("show");
    }, 50);
});

我在这里要做的是首先将对可折叠层的引用存储在id变量中。然后，如果已经可见，则停止执行。如果不是，我将隐藏所有可折叠图层，然后仅显示用户选择的图层。

我希望这会有所帮助。

Answer 3

您可以通过单击按钮来处理所需的行为，并通过添加show类以折叠div来默认显示第一个按钮内容。

请参见下面的代码

$(function(){
  //make button 1 clicked by default
  $('#coll1').addClass('show');
  $('#btons').on('click', '.btn', function(){
     $('.container div.collapse').removeClass('show');
     var target = $(this).data('target');
     $(target).addClass('show');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="flex-colum" id="btons">
     <button type="button" class="btn btn-bg-md btn-outline-primary active" data-toggle="collapse" data-target="#coll1" aria-pressed="false" autocomplete="off" id="btn1">Button 1</button>
     <button type="button" class="btn btn-bg-md btn-outline-primary" data-toggle="collapse" data-target="#coll2" aria-pressed="false" autocomplete="off" id="btn2">Button 2</button>                                
</div>                                                                
<div class="container"> 
     <div class="collapse" data-parent="#section_four" id="coll1">
          <div class="container">
          <h1>Hello im conllapse 1</h1>
          </div>
     </div>
     <div class="collapse" data-parent="#section_five" id="coll2">
          <div class="container">
          <h1>Hello im conllapse 2</h1>
          </div>                                                    
     </div>
</div>

按下后，Bootstrap按钮不会禁用

3 个答案: