单选按钮引导面板无法正常工作

时间:2015-11-13 04:26:29

标签: javascript jquery

http://jsfiddle.net/um7m89hp/10/

    <div class="piGal pull-right">
    Some image or <br />
    images will go <br />
    over here.
</div>
<div class="panel-group pull-left" id="products">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber1">
            <h4 class="panel-title">
                <div>
                    <input type="radio" name="specs">

                            Some Product Title #1<br /> 
                            Some Product Subtitle

                </div>
            </h4>
        </div>
        <div id="partnumber1" class="panel-collapse collapse">
             <div class="list-group">
                 <ul class="list-group">
                     <li class="list-group-item">Some product data</li>
                     <li class="list-group-item">Some product data</li>
                </ul>
             </div>
        </div>
        <div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber2">
            <h4 class="panel-title">
                <div>
                    <input type="radio" name="specs">

                        Some Product Title #2 <br />
                        Some Product Subtitle

                </div>
            </h4>
        </div>
        <div id="partnumber2" class="panel-collapse collapse">
             <div class="list-group">
                 <ul class="list-group">
                     <li class="list-group-item">Some product data</li>
                     <li class="list-group-item">Some product data</li>
                </ul>
             </div>
        </div>
    </div>
</div>

单选按钮仅在单击面板中的文本时进行检查。如果直接单击单选按钮本身或在边框空间中,它将激活面板但不检查单选按钮。有关此问题的任何帮助吗?我正在尝试使用单选按钮将格式保留在面板文本的旁边。

1 个答案:

答案 0 :(得分:0)

是的,奇怪的行为。手风琴上有BS css的东西是我猜的。您需要做的就是更改收音机的检查触发器。我在崩溃的shown事件中得到了它。

 $(".panel-collapse").on("shown.bs.collapse", function(event) {

     //travel up the DOM to the heading and check the radio
     $(this).prev('.panel-heading').find('input').prop("checked", true);

});

这里是小提琴:http://jsfiddle.net/um7m89hp/16/