【问题标题】: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的第二个祖先是否为&lt;a class="" href="#colapseXXXXX" data-parent="#accordion" data-toggle="collapse"&gt;&lt;/a&gt;。例如检查 href 中的值。然后如果是真的触发点击&lt;a&gt;

    试试这个代码:

    $('.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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-10-26
      • 2015-05-05
      • 1970-01-01
      • 1970-01-01
      • 2019-06-12
      • 2019-09-19
      • 2017-05-19
      • 1970-01-01
      相关资源
      最近更新 更多