Question

我在bootstrap css中有一个可折叠的面板，面板主体内有一个button

点击该按钮，我打开一个自举模式

现在我遇到的问题是每当我点击按钮时它会打开模态罚款，但它会关闭面板

我想点击按钮

保持面板打开

我已经尝试e.preventdefault()

了

<div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0">
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">test</h4>

        <div class="pull-right">
            <button type="button" id="5" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
                    id="i5" class="glyphicon glyphicon-plus"></i> Check in
            </button>
            <span class="label label-default badge-round pull-right label-checkin">1 </span></div>
    </div>
    <div id="collapse0" class="panel-collapse collapse">
        <div class="panel-body">
            <div><p>test<strong>&nbsp;description</strong></p>
            </div>
            <div>
                <button id="5" data-toggle="modal" data-target="#myModal" type="button"
                        class="btn btn-danger btn-sm location-btn center-block"><span
                        class="glyphicon glyphicon-map-marker"></span>00 Piter Street, New South Wales,
                    Australia
                </button>
            </div>
        </div>
    </div>
</div>
<div data-toggle="collapse" href="#collapse1" class="panel panel-default panel-style row event-row collapsed"
     id="panel1" aria-expanded="false">
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">show jumping test 1</h4>

        <div class="pull-right">
            <button type="button" id="10" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
                    id="i10" class="glyphicon glyphicon-plus"></i> Check in
            </button>
            <span class="label label-default badge-round pull-right label-checkin">1 </span></div>
    </div>
    <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
            <div><p><strong>This is a very long description written<span id="restOfArticle" style="display:none"> just to test the word wrap and make it more compatible with the mobile screen. ThisIsAVeryVeryLongWordWrittenToTestWordWrapCSSIHopeItWorks</span></strong>
                </p>
                <a onclick="showMoreOrLess(this,&quot;restOfArticle&quot;)">..Read more</a></div>
            <div>
                <button id="10" data-toggle="modal" data-target="#myModal" type="button"
                        class="btn btn-danger btn-sm location-btn center-block"><span
                        class="glyphicon glyphicon-map-marker"></span>500 Piter Street, New South Wales,
                    Australia
                </button>
            </div>
        </div>
    </div>
</div>

这是jsfiddle demo ..它不完美，但正如你可以看到我点击按钮关闭面板...

我想阻止面板关闭我还能做些什么来保持面板打开???

谢谢

Answer 1

问题是，即使您在面板体中单击，也只需单击带有模态，面板关闭的按钮。

将data-toggle="collapse" href="#collapse0"移至面板标题，只有当您点击标题时，您的面板才会打开和关闭（现在您在带有类面板的div上显示此内容，这会导致您的问题）。

Answer 2

我认为您必须更改代码并按照以下有关Accordion Bootstrap的代码进行操作。这是链接http://getbootstrap.com/javascript/#collapse-example-accordion

如何在按钮单击身体时保持引导面板打开

2 个答案: