Bootstrap手风琴：如何使整个按钮可点击？

Question

我使用以下示例将手风琴菜单添加到我的站点：

<div class="bs-example">
    <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Menu number one</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>Menu number one text</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. Menu number two</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Menu number two</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. Menu number three</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Menu number three</p>
            </div>
        </div>
    </div>
    </div>
</div>

你可以在这里看到它

您知道如何使整个按钮可点击吗？目前只有标题可以做到。

先感谢您

Answer 1

创建click事件，.panel-heading然后在事件中检查.panel-heading第二个祖先是否为<a class="" href="#colapseXXXXX" data-parent="#accordion" data-toggle="collapse"></a>。例如，检查href中的值。然后，如果触发，则单击<a>。

试试这个代码：

$('.panel-heading').on('click', function () {
    var a = $(this).childen('.panel-title').children('a');
    var ahref = a.prop('href');
    if (ahref.indexOf('#collapse') > -1)
    {
        a.trigger("click");
    }
});

工作解决方案：

$(document).ready(function(){

    $('.panel-heading').on('click', function () {
        var a = $(this).find('a');
        var ahref = a.prop('href');
        if (ahref.indexOf('#collapse') > -1)
        {
            $('.panel-collapse').removeClass('in'); 
            $(this).next('div').addClass('in');
        }
    });

    $(".panel-heading a").on('click', function(event) { 
        $(this).closest('.panel-heading').trigger('click');
        return false;
    });

});;

触发单击会导致单击事件冒泡，回到.panel-heading，而.panel-heading再次触发单击，造成无限循环。如果我尝试阻止preventDefault（），那么我也会阻止默认的引导行为，因此单击不会更改任何内容。我认为上述解决方案是唯一的解决方案。