手風琴控制不能在這裏工作corretly

直播版本： http://www.bootply.com/7aYZsAKgSy 手風琴控制不能在這裏工作corretly

我有兩個的這些我的網頁上希望他們可以摺疊或展開相互獨立的，我不想讓他們中的一個影響其他人的地位。

所以我有這樣的事情：

<div class="container"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL1"> 
         <span class="glyphicon glyphicon-chevron-down"></span> 
         PANEL 1 
        </a> 
       </h4> 
      </div> 
      <div id="PANEL1" class="panel-collapse collapse in"> 
       <div> 
       THERE IS A FORM HERE THAT IS THE STUFF IN THIS PANEL 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

，然後一個下更，非常類似於複製粘貼，內部DIV的只是ID是不同的：

我有兩個的這些我頁面，希望他們摺疊或擴大彼此獨立，我不希望他們中的一個對其他人的狀態產生影響。

所以我有這樣的事情：

<div class="container"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL2"> 
         <span class="glyphicon glyphicon-chevron-down"></span> 
         PANEL 1 
        </a> 
       </h4> 
      </div> 
      <div id="PANEL2" class="panel-collapse collapse in"> 
       <div> 
       THERE IS another FORM HERE THAT IS THE STUFF IN THIS PANEL 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

，然後我的JavaScript是這樣的：

$('.collapse').on('shown.bs.collapse', function() { 
    $(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down"); 
}).on('hidden.bs.collapse', function() { 
    $(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); 
});

所以有時它的工作原理，有時沒有。當他們兩人都打開，我首先關閉第二個，它也關閉了第一個。

來源

2016-04-13 Bohn

如果這些是同一頁上的兩個單獨的手風琴，您應該給他們不同的ID。 – JDupont

我想你可以刪除'data-parent'屬性。我認爲它的目的是關閉所有其他可摺疊的東西，這是你不想要的東西。 –

這是你想要的嗎？

http://www.bootply.com/MiQbLj7uIA

我剛剛更改了第二個手風琴的號碼及其數據父項值。

來源

2016-04-13 18:42:28

這是正確的@波恩？ –

+1如果OP在頁面上需要兩個手風琴，則這是正確的。但我不知道他是否想要這樣做，或者只是一個手風琴，它們可以擴大相互獨立的部分。如果他想要後者，他可以完全刪除'data-parent'屬性。 –

@ValterJunior我認爲現在工作正常。謝謝。 – Bohn

手風琴控制不能在這裏工作corretly

回答

相關問題