부트 스트랩 아코디언 버튼이 작동하지 않는 "데이터 부모"전환

부트 스트랩 아코디언 버튼이 작동하지 않는 "데이터 부모"전환

---

아코디언 마크 업없이 데이터 속성으로 접을 수있는 버튼을 사용하여 부트 스트랩 3을 사용하여 아코디언을 만들려고합니다. 나에게 더 깨끗해 보입니다.

그러나 데이터 부모 속성이 작동 하도록 만들 수 없습니다 . 질문을 열 때 다른 모든 질문을 닫고 싶습니다. 문서 ( http://getbootstrap.com/javascript/#collapse-usage )를 읽고 있지만 여전히 작동하지 않습니다.

다음 코드를 사용하고 있습니다.

<div class="accordion" id="myAccordion">
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
    <div id="collapsible-1" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
    <div id="collapsible-2" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
    <div id="collapsible-3" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
</div>

다음은 JSFiddle입니다. http://jsfiddle.net/twinsen/AEew4/

누군가 내가 실수하는 곳을 지적하면 매우 기쁠 것입니다.

---

부트 스트랩 4

data-parent=""접기 요소 의 속성 사용 (트리거 요소 대신)

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <h5>
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
          Collapsible #1 trigger
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Collapsible #1 element
      </div>
    </div>
  </div>
  ... (more cards/collapsibles inside #accordion parent)
</div>

---

부트 스트랩 3

GitHub에서이 문제를 참조하십시오 : https://github.com/twbs/bootstrap/issues/10966

속성을 .panel사용할 때 아코디언을 클래스에 종속시키는 "버그"가 data-parent있습니다. 이 문제를 해결하려면 각 아코디언 그룹을 '패널'div로 래핑 할 수 있습니다.

http://bootply.com/88288

<div class="accordion" id="myAccordion">
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
        <div id="collapsible-1" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
        <div id="collapsible-2" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
        <div id="collapsible-3" class="collapse">
           ...
        </div>
    </div>
</div>

편집하다

주석에서 언급했듯이 각 섹션은 .panel. 하나...

• .panel 다음으로 사용되는 요소의 직계 하위 여야합니다. data-parent=
• 각 아코디언 섹션 ( data-toggle=)은 .panel( http://www.bootply.com/AbiRW7BdD6# ) 의 직계 하위 항목이어야합니다.

---

.panel에 대한 종속성이있을뿐만 아니라 DOM 구조에 대한 종속성도 있습니다.

요소가 다음과 같이 구성되어 있는지 확인하십시오.

    <div id="parent-id">
        <div class="panel">
            <a data-toggle="collapse" data-target="#opt1" data-parent="#parent-id">Control</a>
                <div id="opt1" class="collapse">
...

It's basically what @Blazemonger said, but I think the hierarchy of the target element matters too. I didn't finish trying every possibility out, but basically it should work if you follow this hierarchy.

FYI, I had more layers between the control div & content div and that didn't work.

---

Try this. Simple solution with no dependencies.

$('[data-toggle="collapse"]').click(function() {
  $('.collapse.in').collapse('hide')
});

---

As Blazemonger said, #parent, .panel and .collapse have to be direct descendants. However, if You can't change Your html, You can do workaround using bootstrap events and methods with the following code:

$('#your-parent .collapse').on('show.bs.collapse', function (e) {
    var actives = $('#your-parent').find('.in, .collapsing');
    actives.each( function (index, element) {
        $(element).collapse('hide');
    })
})

---

If found this alteration to Krzysztof answer helped my issue

$('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) {            
    var all = $('#' + parentId).find('.collapse');
    var actives = $('#' + parentId).find('.in, .collapsing');
    all.each(function (index, element) {
      $(element).collapse('hide');
    })
    actives.each(function (index, element) {                
      $(element).collapse('show');                
    })
})    

if you have nested panels then you may also need to specify which ones by adding another class name to distinguish between them and add this to the a selector in the above JavaScript

---

Here is a (hopefully) universal patch I developed to fix this problem for BootStrap V3. No special requirements other than plugging in the script.

$(':not(.panel) > [data-toggle="collapse"][data-parent]').click(function() {
    var parent = $(this).data('parent');
    var items = $('[data-toggle="collapse"][data-parent="' + parent + '"]').not(this);
    items.each(function() {
        var target = $(this).data('target') || '#' + $(this).prop('href').split('#')[1];
        $(target).filter('.in').collapse('hide');
    });
});

EDIT: Below is a simplified answer which still meets my needs, and I'm now using a delegated click handler:

$(document.body).on('click', ':not(.panel) > [data-toggle="collapse"][data-parent]', function() {
    var parent = $(this).data('parent');
    var target = $(this).data('target') || $(this).prop('hash');
    $(parent).find('.collapse.in').not(target).collapse('hide');
});

---

I got the same problem when toggling the accordion. But when I try to put the script block in the header block, it works for my case!!

<head>   
...   
<link rel="stylesheet" href="../assets/css/bootstrap.css" />       
<script src="../assets/js/jquery-1.9.1.min.js" ></script>   
<script src="../assets/js/bootstrap.js" ></script> 
</head>

참고URL : https://stackoverflow.com/questions/19425165/bootstrap-accordion-button-toggle-data-parent-not-working