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

Question

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

5

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

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

您可以在这里实时查看。

请问如何才能使整个按钮可点击？目前只有标题可以点击。

提前感谢您的帮助。

- smartmouse

4个回答

4

只是一条提醒，

你尝试将a标签移到h4类的外面了吗？这样就不用

标签来闭合a标签了。

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

- Clyde

这个完美地运作！我们为什么不想把标题放在链接里面呢？<a href="#"><h4>Header</h4></a> - Abu Sulaiman

我看不出任何原因为什么不能正常工作。 - Clyde

1

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

只需将您的“.panel-title a”的显示设置为块

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

.panel-heading{
    padding: 0;
}

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

这里不需要 .js。

- hikups

兄弟，这应该有更多的投票！运行得非常好！ - Daniel

0

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

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

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

- Morne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sebastian Xawery Wiśniowiecki · Accepted Answer

创建点击事件.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()来防止这种情况，那么也会阻止默认的bootstrap行为，使得点击没有任何变化。以上解决方案在我看来是唯一的解决方案。