Bootstrap手風琴和addClass

Question

我正在為一個FAQ項目創建一個引導手風琴，涉及大約12個問題。 以下面板之一的代碼如下：

<div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">What will it cost</a></h4>
</div>

    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            <p>It will cost a fortune.</p>
        </div>
    </div>
</div>

手風琴可以很好地展開和縮回，但是對於每個面板，我需要在單擊時添加一個css類，並在單擊另一個面板或再次單擊同一面板時將其刪除，因此在關閉面板時我可以顯示一個關閉的圖標。 為了避免為每個面板編寫相同的代碼，我需要使用'this語句（我假設）來創建一些代碼。 我下面的代碼有點不起作用。 我朝着正確的方向前進嗎？

$( "h4" ).click(function() {
            $(this).on('hidden.bs.collapse', function () {
            $(this).prev().addClass('closed')
            })
            $(this).on('shown.bs.collapse', function () {
            $(this).prev().removeClass('closed')
            })


        });

Answer 1

您正在監聽事件中的事件。 $(this).on('hidden.bs.collapse', function ()在合攏關閉時觸發。

更好的方法是檢查某個Bootstrap類。 這是開放的崩潰將有類in 。

$('h4').on('click', function(e) {
    var elem = $($(this).find('a').attr('href'));
    if(elem.hasClass('in')) {
        $(this).prev().removeClass('closed');
    }
    else {
        $(this).prev().addClass('closed');
    }
});

現在，這是一個相當“骯臟”的解決方案，因為現在所有<h4>標簽都將在單擊時觸發此代碼。 僅使用可用的Bootstrap類添加首選圖標可能是一個更好的主意。 由於in class allready會告訴您面板是否打開。

希望這會有所幫助。

Answer 2

看看這個jsFiddle

要簡單地在您單擊的行上添加/刪除一個類，您可以從除使用jQuery的.not()單擊的行之外的所有行中刪除該類，然后在您單擊的行上切換該類。 換句話說，該類會從您單擊的行之外的每一行中刪除，並且會添加到您單擊的行中或從中刪除。 如果在<a>標記上使用了accordion-toggle類，則代碼將如下所示：

// Happens in your click event
$('.accordion-toggle').not($(this)).removeClass('panelBackground');
$(this).toggleClass('panelBackground');

我不知道您的closed類是什么樣子，因此在此jsFiddle中，我僅在展開的行上放置了黃色背景。 當然，您可以將類更改為所需的任何類，但是此示例顯示了如何向擴展的行添加類，如何在擴展另一行時將其刪除，以及在再次單擊該行並將其折疊時將其刪除。 在這個例子中，我添加了一個class你<a>標簽，命名為accordion-toggle ，和我將它綁定到.click()事件。