引导手风琴:如何使整个按钮可点击

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

创建事件.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()，我也会阻止默认的引导行为，所以点击不会改变任何东西。以上是我唯一的看法。

Answer 2

提醒一下，

你有没有试着把a拉出h4班?所以不用

    <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 class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            <h4 class="panel-title">1. Menu number one</h4>
         </a>
    </div>

Answer 3

我知道这是一个旧的线程，但我有同样的问题，解决它更容易。

给你的"。Panel-title a" a display of block

如果父div有padding，则将其设置为0，并将其设置为。panel-title a

.panel-heading{
    padding: 0;
}
.panel-title a{
    display: block;
    padding: 15px;
}

这里不需要.js

Answer 4

这是一个旧线程，但我今天使用Bootstrap 4遇到了完全相同的问题。

我遵循了hiup的解决方案，但没有必要使用自定义CSS。只需在锚元素的class属性中添加d-block。

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="d-block">1. Menu number one</a>