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

【问题标题】：Bootstrap accordion: how to make entire button clickable?Bootstrap 手风琴：如何使整个按钮可点击？
【发布时间】：2015-10-20 01:36:06
【问题描述】：

我在我的网站上添加了一个手风琴菜单，使用这个例子：

<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>

你可以看到它直播here

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

提前谢谢你

【问题讨论】：

标签： twitter-bootstrap menu accordion clickable

【解决方案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 再次触发点击导致无限循环。如果我尝试阻止默认（），我也会阻止默认的引导行为，所以 click 没有改变任何东西。上面的解决方案是我认为唯一的一个。

【讨论】：

对不起，我不明白你的意思……你能再添加一些代码吗？
当你说“祖先”时……你是说“孩子”吗？
是的，抱歉找到“后代”
我想我做作业了：pastebin.com/tZpSMaKF。无论如何，除了第一个之外，这些都不起作用。怎么了？
不起作用：ahref.indexOf('#collapse') 似乎总是-1

【解决方案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>

【讨论】：

这很完美！我们有什么理由不想在链接中放置标题？
标题
我
我看不出有什么理由不能正常工作

【解决方案3】：

我知道这是一个旧线程，但我遇到了同样的问题并且更容易解决。

只需给你的“.panel-title a”块显示

如果父 div 有填充，请将其设置为 0 并将其设置为您的 .panel-title a

.panel-heading{
    padding: 0;
}

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

这里不需要 .js

【讨论】：

老兄，这应该有更多的选票！像魅力一样工作！

【解决方案4】：

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

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

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

【讨论】：