时间戳

首页 > 解决方案 > 按下后引导按钮不会禁用

jquery - 按下后引导按钮不会禁用

问题描述

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

我有这个 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>

我该怎么做这样的事情：

我试过这个：

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

此外，我尝试将按钮设置为禁用，如果有活动则返回，如果 hasClass 活动。

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

标签： jqueryhtmltwitter-bootstrapbootstrap-4

解决方案

如果您使用的是 bootstrap 4，那么为什么要使用多重折叠的自定义代码。已经有 nav pills 组件可以做你想做的事情。

遵循以下代码：

<!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>

谢谢...

推荐阅读