點擊手風琴兩次箭頭位置不變

Question

我有手風琴，我用「上」和「下」箭頭，它的工作正常，但是，當我再次點擊面板標題箭頭不會改變。

說明：

在這個例子中我用「A」和「B」而不是「向上」和「向下」箭頭， 當頁面加載所有面板標題顯示「A」， 一旦點擊面板標題「A」改變爲「B」，但再次點擊「B」它不改變爲「A」。

$('#leftMenu .panel-title a').click(function(){ 
    $('#leftMenu .panel-title a').parent('.panel-title').removeClass('accordion-opened'); 
    $(this).parent('.panel-title').addClass('accordion-opened'); 
}); 

JSFiddle Here

Answer 1

該解決方案將工作刪除accordion-opened類。 Updated fiddle。

修改您的JS跳過當前/單擊的一個。

$('#leftMenu .panel-title a').click(function() { 
    $('#leftMenu .panel-title').not($(this).parent('.panel-title')).removeClass('accordion-opened'); 
    $(this).parent('.panel-title').toggleClass('accordion-opened'); 
}); 

注：

通過Aneesh Sivaraman未能解決。檢查：

1. 單擊第二個手風琴（Program Description）一次。
2. 現在點擊第一手風琴（Issue Type） - 它仍然顯示A

Answer 2

請檢查該updated fiddle

無需添加 '手風琴開' 級當我們點擊第二次。

Answer 3

您可以通過自己的添加類，然後添加按照該

$('#leftMenu .panel-title a').click(function() { 
 
    $('#leftMenu .panel-title a').parent('.panel-title').removeClass('accordion-opened'); 
 
    if ($(this).hasClass('opened')) { 
 
    $(this).removeClass('opened'); 
 
    $(this).parent('.panel-title').removeClass('accordion-opened'); 
 
    } else { 
 
    $(this).addClass('opened'); 
 
    $(this).parent('.panel-title').addClass('accordion-opened'); 
 
    } 
 
});

#leftMenu .accordion-toggle:after { 
 
    font-family: 'FontAwesome'; 
 
    content: "A"; 
 
    float: right; 
 
} 
 
#leftMenu .accordion-opened .accordion-toggle:after { 
 
    content: "B"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="leftMenu" class="panel-group"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#tab-1">Issue Type</a> 
 
\t \t \t \t \t \t \t </h4> 
 
    </div> 
 
    <div id="tab-1" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     <h1>Issue Type</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#tab-2">Program Description</a> 
 
\t \t \t \t \t \t \t </h4> 
 
    </div> 
 
    <div id="tab-2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     <h1>Program Description</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--/#leftMenu-->