單擊另一個手風琴中的鏈接時手風琴圖像不會改變

我有一個有多個手風琴的頁面。每個手風琴在最後顯示一個人字形圖像，當您點擊標題以展開手風琴時，圖像將變爲V形圖像。單擊另一個手風琴中的鏈接時手風琴圖像不會改變

這些工作很完美，但如果我在手風琴上有一個引用另一個手風琴的鏈接，那麼引用的手風琴將按照預期展開，但是由於用戶沒有點擊新擴展的手風琴，因此我的圖像不會改變。

我該怎麼做。

我<a>是

<p><a class="collapsed" href="#SubTitle2" data-toggle="collapse" data-target="#collapseTwo">Test</a></p>

下面是當我點擊了第一手風琴鏈接的截圖，它擴展了我的第二個手風琴。

enter image description here

爲「標題2」應該是「雪佛龍類」，因爲它是爲「標題1」

這是通過我的CSS做如下圖所示

.panel-heading .accordion-toggle-inforcentre:after 
    font-family:'Glyphicons Halflings'; 
    content:"\e113"; 
    position: absolute; 
    right: 2.5em; 

.panel-heading .accordion-toggle-inforcentre.collapsed:after 
    content:"\e114";

圖像

我完整的HTML是

<div class="panel-group"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       <a data-toggle="collapse" href="#collapseOne" class="accordion-toggle-inforcentre collapsed">Heading 1</a> 
      </h3> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <p>Paragraph 1</p> 
       <p>Paragraph 2</p> 
       <p><a class="collapsed" href="#collapseTwo" data-toggle="collapse" data-target="#collapseTwo">Paragraph 3 - opens accordion below</a></p> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       <a data-toggle="collapse" href="#collapseTwo" class="accordion-toggle-inforcentre collapsed">Heading 2</a> 
      </h3> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <p>Paragraph 1</p> 
       <p>Paragraph 2</p> 
       <p>Paragraph 3</p> 
      </div> 
     </div> 
    </div> 
</div>

來源

2014-10-03 murday1983

你如何改變雪佛龍？ JQuery的？ – 2014-10-03 13:23:59

@StevenWeb，請參閱我的CSS，它的形象變化 – murday1983 2014-10-03 13:32:18

我做了更新 – 2014-10-03 13:53:37

我做了一個本地項目和使用微博

.panel-heading a:after { 
     font-family: 'Glyphicons Halflings'; 
     content: "\e113"; 
     position: absolute; 
     right: 1.5em; 
    } 

    .panel-heading a.collapsed:after { 
     content: "\e114"; 
    }

，效果不錯：根據樣本HERE我做otstrap 3！

更新：

FIDDLE

OK，現在我明白了：問題是，倒塌的類只會改變點擊相應的引導元件上。所以你必須用jQuery來操作類。

你可以做到這一點，如：

$('#accordion').on('show.bs.collapse', function (e) { 
     $(e.target).closest('.panel-default') 
      .find('.panel-heading a') 
      .removeClass('collapsed'); 
    });

我做了這個剪斷，根據我的樣本。我只是增加了一個自定義鏈接在第一容器，如：

<div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
        Collapsible Group Item #1 
       </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       content A 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
        Collapsible Group Item #1 
       </a> 
      </div> 
     </div> 
    </div>

DEMO

UPDATE：

添加類暈倒在關閉手風琴部件，如：

<a data-toggle="collapse" 
    class="collapsed" 
    data-parent="#accordion" 
    href="#collapseTwo"> 
    Collapsible Group Item #2 
</a>

NEW FIDDLE

來源

2014-10-03 13:45:16

感謝您的更新，但我認爲你誤解了我的問題是。當我點擊標題時，我的手風琴圖像工作正常，我的問題是，如果我點擊一個擴展另一個的鏈接，那麼圖像不會改變 – murday1983 2014-10-06 07:10:06

@ murday1983新的更新！ – 2014-10-06 11:20:24

感謝您的更新，但我似乎無法讓它與我的HTML一起工作。我已經添加了我的更新CSS和我的HTML，我做錯了什麼，就好像我粘貼你的東西從你的小提琴它的工作 – murday1983 2014-10-06 15:29:41

在我的樣本中，acc在我觸發外部手風琴部分的打開事件後，嵌套鏈接的ordion將關閉，並且必須通過單擊相應的鏈接關閉它。

在您的示例中它保持打開狀態。所以用戶可以通過外部鏈接關閉外部手風琴。

您的問題是，現在你必須有像jQuery再次觸發事件（接近在這種情況下）：

$('#accordion').on('hide.bs.collapse', function (e) { 
     $(e.target).closest('.panel-default') 
      .find('.panel-heading a') 
      .addClass('collapsed'); 
    });

這裏是你的HTML樣本：http://jsfiddle.net/86qrku9h/6/

希望幫助了:)

來源

2014-10-06 16:23:40

單擊另一個手風琴中的鏈接時手風琴圖像不會改變

回答

相關問題