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>

你可以看到它here

您知道如何让整个按钮可点击吗？目前，标题就是这样。

提前谢谢

Answer 1

创建点击事件$ python3.4 Python 3.4.0 (default, Jun 19 2015, 14:20:21) [GCC 4.8.2] on linux Type "help", "copyright", "credits" or "license" for more information. >>> import json >>> j = """{u'spec1': {u'property1': u'12345', u'property2': 1234}, u'spec2': {u'property3': u'98754', u'property4': u'val1'}}""" >>> json.loads(j.replace("'","\"").replace('u"','"')) {'spec1': {'property1': '12345', 'property2': 1234}, 'spec2': {'property4': 'val1', 'property3': '98754'}}并在事件中检查.panel-heading第二祖先是.panel-heading。例如，检查href中的值。然后，如果是真的触发器，请单击<a class="" href="#colapseXXXXX" data-parent="#accordion" data-toggle="collapse"></a>。

试试这段代码：

<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");
    }
});

触发点击导致冒泡点击事件回到.panel-heading和.panel-heading触发再次点击进行无限循环。如果我尝试preventDefault（）我也会阻止默认的bootstrap行为，所以点击没有改变任何东西。上面的解决方案是我认为唯一的解决方案。

Answer 2

只是一个注释，

你是否尝试过拉出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”设为“块

”

如果父母div有填充，请将其设置为0并将其设置为.panel-title a而不是

.panel-heading{
    padding: 0;
}

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

这里不需要.js

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

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

4 个答案: