Question

我正在为FAQ项目创建一个带有大约12个问题的bootstrap手风琴。其中一个小组的代码如下：

<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类已经告诉您面板是否打开。

希望这会有所帮助。

Answer 2

看看这个jsFiddle

要简单地在您单击的行上添加/删除一个类，您只需从使用jQuery .not()单击的行以外的所有行中删除该类，然后在您单击的行上切换该类。换句话说，除了您单击的行之外，该类将从每一行中删除，并添加到您单击的行或从您单击的行中删除。如果您在accordion-toggle标记上使用了类<a>，则代码如下所示：

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

我不知道你的closed课看起来是什么样的jsFiddle我只是在展开的行上画了一个黄色背景。当然，您可以将类更改为您需要的任何类，但此示例显示如何将类添加到展开的行，在展开另一行时将其删除，并在再次单击该行并折叠时将其删除。在示例中，我在class标记中添加了<a>，名为accordion-toggle，并将其绑定到.click()事件。

Bootstrap手风琴和addClass

2 个答案: