blocks|key|4693418|text|对两个div使用相同的类，并根据此设置您的data-target。给你的div赋予相同的父类(也可以是一个类)，并根据这个设置data-parent。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4693419|<button+type="button"+data-parent="#wrap"+data-toggle="collapse"+data-target=".demo">
++++simple+collapsible
</button>
<div+id="wrap">
++++<div+class="demo+collapse">
++++++++test1
++++</div>
++++<div+class="demo+collapse">
++++++++test1
++++</div>
</div>|code-block|syntax|javascript|4693420|entityMap^0|L|B|1R|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Use the same class for both div's and set your <code>data-target</code> according this. Give your div's also the same parent (can also be a class) and set <code>data-parent</code> according this.</p>
<pre><code>&lt;button type=&quot;button&quot; data-parent=&quot;#wrap&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.demo&quot;&gt;
    simple collapsible
&lt;/button&gt;
&lt;div id=&quot;wrap&quot;&gt;
    &lt;div class=&quot;demo collapse&quot;&gt;
        test1
    &lt;/div&gt;
    &lt;div class=&quot;demo collapse&quot;&gt;
        test1
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|187557|text|您只需在data-target中添加以逗号分隔的所有ids|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|187558|<button+type="button"+data-toggle="collapse"+data-target="#demo,#demo1,#demo2">
++Hide+them+all
</button>|code-block|syntax|javascript|187559|entityMap^0|4|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You can simply add all the ids separated by commas in <code>data-target</code>:</p>
<pre><code>&lt;button type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#demo,#demo1,#demo2&quot;&gt;
  Hide them all
&lt;/button&gt;
</code></pre>


blocks|key|4693474|text|如果你想隐藏一个元素而显示另一个元素(就像bootstrap+accordion，但是没有面板)，你可以添加多个目标，但也可以添加类'in‘，以便在加载时展开一个元素！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4693475|<div+class="collapse+text-center+clearfix+in"+id="section1">
+++<h1>This+is+section+1</h1>
+++<p>Are+you+excited+about+toggling?</p>
</div>
<div+class="collapse+text-center+clearfix+alert-warning"+id="section2">
+++<h1>Boo!!</h1>
+++<p>This+is+a+new+sentence</p>
</div>
<button+class="btn+btn-block+btn-primary"+data-toggle="collapse"+data-target="#section1,#section2">Toggle</button>|code-block|syntax|javascript|4693476|Live+demo+here|offset|length|4693477|entityMap|0|LINK|mutability|MUTABLE|url|http://www.bootply.com/9qzmtbp6B8^0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>If you want to hide one element and show another (like the bootstrap accordion but without a panel) you can add multiple targets but also add the class 'in' to have one element expanded on load!</p>

<pre><code>&lt;div class="collapse text-center clearfix in" id="section1"&gt;
   &lt;h1&gt;This is section 1&lt;/h1&gt;
   &lt;p&gt;Are you excited about toggling?&lt;/p&gt;
&lt;/div&gt;
&lt;div class="collapse text-center clearfix alert-warning" id="section2"&gt;
   &lt;h1&gt;Boo!!&lt;/h1&gt;
   &lt;p&gt;This is a new sentence&lt;/p&gt;
&lt;/div&gt;
&lt;button class="btn btn-block btn-primary" data-toggle="collapse" data-target="#section1,#section2"&gt;Toggle&lt;/button&gt;
</code></pre>

<p><a href="http://www.bootply.com/9qzmtbp6B8" rel="noreferrer">Live demo here</a></p>


blocks|key|187577|text|这个以数据为目标的答案对我不起作用。但是，您可以使用JavaScript来完成此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|187578|让您的按钮调用一些JavaScript，如下所示：|187579|$('.collapse-class').collapse('toggle')|code-block|syntax|javascript|187580|请参阅：https://getbootstrap.com/javascript/#via-javascript-3|offset|length|187581|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/javascript/#via-javascript-3^0|0|0|0|4|1H|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>The data-target answer did not work for me. However you can use JavaScript to do this.</p>

<p>Make your button call some JavaScript like:</p>

<pre><code>$('.collapse-class').collapse('toggle')
</code></pre>

<p>See: <a href="https://getbootstrap.com/javascript/#via-javascript-3" rel="nofollow noreferrer">https://getbootstrap.com/javascript/#via-javascript-3</a>.</p>


blocks|key|4693501|text|Bootstrap+4使用document.querySelector而不是document.querySelectorAll。如果这一点改变了，那么一切都会正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4693502|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Bootstrap 4 uses document.querySelector instead of document.querySelectorAll. If this changes, then everything works.</p>


blocks|key|187674|text|我也遇到过同样的问题，但是bootstrap不允许在data-toggle="collapsed"之外使用data-toggle="tab"，所以我的问题是这样的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|187675|我有：|187676|<a+type="button"+class="btn+btn-default+btn-lg+btn-block+"+href="#ld-tab-pane-eye"+aria-expanded="false"+aria-controls="ld-tab-pane-eye"+role="tab"+data-toggle="tab"+aria-haspopup="true"+aria-expanded="false"+style="+border:+0px+;">+</a>|code-block|syntax|javascript|187677|这就是切换标签：|187678|<button+type="button"+class="navbar-toggle+collapsed+nav-trigger+style-mobile"+data-toggle="collapse"+data-target="#main-header-collapse"+aria-expanded="false"+data-changeclassnames='{+"html":+"mobile-nav-activated+overflow-hidden"+}'>
</button>|187679|但是这个关闭了模式，因为开关选项卡按钮在模式中。|187680|为了解决这个问题，我添加了id="popout"(第一个按钮)和id="popoutTrigger"+(第二个按钮)。|187681|和这个脚本(jQuery)：|187682|$(+"#popout"+).click(function()+{
++$(+"#popoutTrigger"+).trigger(+"click"+);
});|187683|当用户在模式中单击切换按钮时，切换后的模式将关闭。|187684|这是我所做的事情的一个视图。|187685|​|187686|📷|atomic|187687|187688|我希望我的解决方案能有所帮助。|187689|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/b58057f914de652d52e5dc1e5cbeac05.jpeg|imageAlt^0|Q|N|1H|H|0|0|0|0|0|0|D|B|W|I|0|0|0|0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1O|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1P|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1R|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1S|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1T|8|@$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|1Z|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|20|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|21|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|22|8|@]|D|@]|E|$]]|$1|14|3|15|5|16|7|23|8|@]|D|@$9|24|A|25|1|26]]|E|$]]|$1|17|3|13|5|6|7|27|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|28|8|@]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|29|8|@]|D|@]|E|$]]]|1B|$1C|$5|1D|1E|1F|E|$1G|1H|1I|-4]]]]

<p>I  faced the same problem but bootstrap won't let  <code>data-toggle=&quot;tab&quot;</code> beside <code>data-toggle=&quot;collapsed&quot;</code> so my problem was like this.</p>
<p>I have:</p>
<pre><code>&lt;a type=&quot;button&quot; class=&quot;btn btn-default btn-lg btn-block &quot; href=&quot;#ld-tab-pane-eye&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;ld-tab-pane-eye&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; style=&quot; border: 0px ;&quot;&gt; &lt;/a&gt;
</code></pre>
<p>and this was switching tabs:</p>
<pre><code>&lt;button type=&quot;button&quot; class=&quot;navbar-toggle collapsed nav-trigger style-mobile&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#main-header-collapse&quot; aria-expanded=&quot;false&quot; data-changeclassnames='{ &quot;html&quot;: &quot;mobile-nav-activated overflow-hidden&quot; }'&gt;
&lt;/button&gt;
</code></pre>
<p>But this one closes the modal because the switch tab button was in the modal.</p>
<p>To solve the problem I add <code>id=&quot;popout&quot;</code>(to first button) and <code>id=&quot;popoutTrigger&quot;</code> (to secend button).</p>
<p>And this script (jQuery):</p>
<pre><code>$( &quot;#popout&quot; ).click(function() {
  $( &quot;#popoutTrigger&quot; ).trigger( &quot;click&quot; );
});
</code></pre>
<p>When the user clicked the switch button in the modal, after switching modal will close.</p>
<p>This a view of what I've done.</p>
<p><img src="https://i.stack.imgur.com/xjvg8.jpg" alt="this a view of what I've done" /></p>
<p>I hope my solution will help.</p>


<p>I'd like to target two divs for expand when clicking on a single trigger? Is that possible?</p>


Can I specify multiple data targets for Twitter Bootstrap collapse?

jQuery

当单击单个触发器时，我想针对两个div进行扩展？这有可能吗？

问我可以为Twitter Bootstrap折叠指定多个数据目标吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以为Twitter Bootstrap折叠指定多个数据目标吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以为Twitter Bootstrap折叠指定多个数据目标吗？
EN