BS4 закрывать гармошку при нажатии вне корпуса карты - PullRequest
Новая
       16

BS4 закрывать гармошку при нажатии вне корпуса карты

0 голосов
/ 04 июня 2018

Я хотел бы свернуть / закрыть аккордеон, когда щелкнул мышью за пределами тела карты в Bootstrap 4. В Bootstrap 3 это было легко и работало , как это .При щелчке внутри корпуса карты аккордеон не должен закрываться. 

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

Мне нужно, чтобы он работал с Bootstrap 4.

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

В начальной загрузке 4 .panel-body был заменен на .card-body

см. JSFiddle: https://jsfiddle.net/xdfLh6zp/

Вот работа первая:

Я беру пример отсюда: https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp

$(document).click(function(e) {
	if (!$(e.target).is('.card-body')) {
    	$('.collapse').collapse('hide');	    
    }
});
  <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>
0 голосов
/ 04 июня 2018

Этот Jquery свернет гармошку при щелчке по внешнему телу.

$(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);
    }
});
<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>
...