Question

这个问题令人难以置信。我在手风琴组内有一个复选框。我的程序是按下手风琴组内的复选框，它会扩展手风琴组的主体，并在其他地方show()另一个按钮。

问题是当按两个复选框时，按钮显示并隐藏得非常快。我的假设是点击事件在某个地方起泡，我无法抓住它并将其关闭好了！

我的HTML

<div class="accordion span5" id="info-accordion">
    <div class="accordion-group" data-pid="71" data-pweight="2">
        <div class="accordion-heading">
            <input type="checkbox" class="tier-check" value="17">
            <a class="accordion-toggle" data-toggle="collapse" href="#collapse-17">2013-07-10 14:21:03</a>
        </div>
        <div id="collapse-17" class="accordion-body in collapse" style="height: auto;">
            <div class="accordion-inner">Naware is a village in the Bassar Prefecture in the Kara Region of north-western Togo. and add some more content. This is the old one. should show in the info now. To be save really.

            This text should be improved.
            </div>
        </div>
    </div>
    <div class="accordion-group" data-pid="71" data-pweight="2">
        <div class="accordion-heading">
            <input type="checkbox" class="tier-check" value="21">
                <a class="accordion-toggle" data-toggle="collapse" href="#collapse-21">2013-07-10 14:20:39</a>
        </div>
        <div id="collapse-21" class="accordion-body in collapse" style="height: auto;">
            <div class="accordion-inner">Naware is a village in the Bassar Prefecture in the Kara Region of north-western Togo. and add some more content. This is the old one. should show in the info now. To be save really.

            This text should be improved.


            This is new text
            </div>
        </div>
    </div>
    <div class="accordion-group" data-pid="71" data-pweight="2">
        <div class="accordion-heading">
            <input type="checkbox" class="tier-check" value="18">
            <a class="accordion-toggle" data-toggle="collapse" href="#collapse-18">2013-07-10 14:07:53</a>
        </div>
        <div id="collapse-18" class="accordion-body in collapse" style="height: auto;">
            <div class="accordion-inner">Naware is no more
            </div>
        </div>
    </div>
</div>

我的javascript是

//hide them all
var orgchk = $('.tier-check:checkbox').not(':checked');

orgchk.each(function(i) { 
    $(this).removeAttr('disabled');

    var cllps = $('#collapse-' + $(this).val() ); 
    if ( cllps.hasClass('in') );
            cllps.collapse('toggle');
});

//when only one checkbox is selected, show it
var chkbx = $('.tier-check:checkbox:checked');
$('#collapse-' + chkbx.val() ).collapse('show');

if ( chkbx.length != 0 )
         $tier_btn.fadeIn();
else
         $tier_btn.fadeOut();

这是一个小提琴http://jsfiddle.net/nuE2c/仍在根据我的情况定制

Answer 1

我通过使用它找到了解决方案。当jQuery stopPropogation（）和StopImmediatePropagation（）对我不起作用时，它似乎会停止事件传播

$('#accordion').on('hidden',function(e) {
            return false;//stopping propagation
    });

Bootstrap手风琴可折叠和复选框更改干扰

1 个答案: