Question

我想在Bootstrap 4中点击卡片外部时折叠/关闭手风琴。在Bootstrap 3中，它很容易并且工作like this。当卡在卡体内部时，手风琴不应该关闭。

if (!$(e.target).is('.panel-body')) {
    $('.collapse').collapse('hide');        
}

我需要它与Bootstrap 4一起工作。

Answer 1

这个Jquery将在外部咔嗒声中折叠手风琴。

＆＃13;

$(function() {
    $( ".panel-body" ).accordion({
        active: false,
        collapsible: true
    });
});
$(document).click(function(e) {
    if (!$( ".panel-body" ).is(e.target) && !$( ".panel-body" ).has(e.target).length) {
        $('.panel-body').accordion('activate', -1);
    }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="panel-body">
    <h3><a href="#">Collapsible Area</a></h3>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
    Outside of Accordion
</div>

＆＃13;

Answer 2

在引导程序4 .panel-body已替换为.card-body

见JSFiddle： inflateMenu

这是第一项工作：

我从这里举例：https://jsfiddle.net/xdfLh6zp/

＆＃13;

$(document).click(function(e) {
	if (!$(e.target).is('.card-body')) {
    	$('.collapse').collapse('hide');	    
    }
});

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div id="accordion">
<div class="card">
  <div class="card-header">
    <a class="card-link" data-toggle="collapse" href="#collapseOne">
      Collapsible Group Item #1
    </a>
  </div>
  <div id="collapseOne" class="collapse show" data-parent="#accordion">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
    Collapsible Group Item #2
  </a>
  </div>
  <div id="collapseTwo" class="collapse" data-parent="#accordion">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
      Collapsible Group Item #3
    </a>
  </div>
  <div id="collapseThree" class="collapse" data-parent="#accordion">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</div>
  </div>
</div>

＆＃13;

点击外卡体时BS4关闭手风琴

2 个答案: