blocks|key|224077|text|我注意到grim的jsfiddle中有几个小缺陷。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224078|要使指针在整个面板中变为手形，请使用：|224079|.panel-heading+{
+++cursor:+pointer;
}|code-block|syntax|javascript|224080|我去掉了<a>标签(这是一个风格问题)，并始终将data-toggle="collapse"+data-parent="#accordion"+data-target="#collapse..."放在panel-heading上。|offset|length|style|CODE|224081|我在我的jsfiddle中使用font-awesome.css添加了一个显示人字形的CSS方法：|224082|http://jsfiddle.net/weaversnap/7FqsX/1/|224083|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|4|3|O|22|2S|D|0|F|G|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|12|8|@$K|13|L|14|M|N]|$K|15|L|16|M|N]|$K|17|L|18|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@$K|1A|L|1B|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$K|1D|L|1E|1|1F]]|A|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|R]]]]

<p>I've noticed a couple of minor flaws in grim's jsfiddle.</p>

<p>To get the pointer to change to a hand for the whole of the panel use:</p>

<pre><code>.panel-heading {
   cursor: pointer;
}
</code></pre>

<p>I've removed the <code>&lt;a&gt;</code> tag (a style issue) and kept <code>data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."</code> on <code>panel-heading</code> throughout.</p>

<p>I've added a CSS method for displaying chevron, using <code>font-awesome.css</code> in my jsfiddle:</p>

<p><a href="http://jsfiddle.net/weaversnap/7FqsX/1/">http://jsfiddle.net/weaversnap/7FqsX/1/</a></p>


blocks|key|224119|text|另一种方法是让你的<a>填满panel-heading的所有空间。使用此样式可执行以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|224120|.panel-title+a+{
++++display:+block;
++++padding:+10px+15px;
++++margin:+-10px+-15px;
}|code-block|syntax|javascript|224121|查看此演示(http://jsfiddle.net/KbQyx/)。|224122|然后，当你点击标题时，你实际上是在点击<a>。|224123|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/KbQyx/^0|9|3|E|D|0|0|6|Q|0|0|J|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|N|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Another way is make your <code>&lt;a&gt;</code> full fill all the space of the <code>panel-heading</code>. Use this style to do so:</p>

<pre><code>.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}
</code></pre>

<p>Check this demo (<a href="http://jsfiddle.net/KbQyx/">http://jsfiddle.net/KbQyx/</a>).</p>

<p>Then when you clicking on the heading, you are actually clicking on the <code>&lt;a&gt;</code>.</p>


blocks|key|224171|text|简单的解决方案是从.panel-heading中删除填充并添加到.panel-title+a。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|224172|.panel-heading+{
++++padding:+0;
}
.panel-title+a+{
++++display:+block;
++++padding:+10px+15px;
}|code-block|syntax|javascript|224173|此解决方案与calfzhou发布的上述解决方案类似，但略有不同。|224174|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/2897040/calfzhou^0|9|E|W|E|0|0|6|8|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Simple solution would be to remove padding from <code>.panel-heading</code> and add to <code>.panel-title a</code>.</p>

<pre><code>.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}
</code></pre>

<p>This solution is similar to the above one posted by <a href="https://stackoverflow.com/users/2897040/calfzhou">calfzhou</a>, slightly different.</p>


blocks|key|224184|text|这里有一个针对Bootstrap4的解决方案。您只需要将card-header类放在a标记中。这是对example+in+W3Schools的修改。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|224185|​|224186|<link+href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"+rel="stylesheet"/>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div+class="container">
++<div+id="accordion">
++++<div+class="card">
++++++<a+class="card-link+card-header"+data-toggle="collapse"+href="#collapseOne"+>
++++++++Collapsible+Group+Item+#1
++++++</a>
++++++<div+id="collapseOne"+class="collapse"+data-parent="#accordion">
++++++++<div+class="card-body">
++++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.
++++++++</div>
++++++</div>
++++</div>
++++<div+class="card">
++++++<a+class="collapsed+card-link+card-header"+data-toggle="collapse"+href="#collapseTwo">
++++++++Collapsible+Group+Item+#2
++++++</a>
++++++<div+id="collapseTwo"+class="collapse"+data-parent="#accordion">
++++++++<div+class="card-body">
++++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.
++++++++</div>
++++++</div>
++++</div>
++++<div+class="card">
++++++<a+class="card-link+card-header"+data-toggle="collapse"+href="#collapseThree">
++++++++Collapsible+Group+Item+#3
++++++</a>
++++++<div+id="collapseThree"+class="collapse"+data-parent="#accordion">
++++++++<div+class="card-body">
++++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.
++++++++</div>
++++++</div>
++++</div>
++</div>
</div>|code-block|syntax|javascript|224187|224188|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_collapsible_accordion&stacked=h^0|S|B|16|1|1E|K|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

<p>Here's a solution for Bootstrap4.  You just need to put the <code>card-header</code> class in the <code>a</code> tag.  This is a modified from an <a href="https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_collapsible_accordion&amp;stacked=h" rel="noreferrer">example in W3Schools</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;div class="container"&gt;
  &lt;div id="accordion"&gt;
    &lt;div class="card"&gt;
      &lt;a class="card-link card-header" data-toggle="collapse" href="#collapseOne" &gt;
        Collapsible Group Item #1
      &lt;/a&gt;
      &lt;div id="collapseOne" class="collapse" data-parent="#accordion"&gt;
        &lt;div class="card-body"&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo"&gt;
        Collapsible Group Item #2
      &lt;/a&gt;
      &lt;div id="collapseTwo" class="collapse" data-parent="#accordion"&gt;
        &lt;div class="card-body"&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;a class="card-link card-header" data-toggle="collapse" href="#collapseThree"&gt;
        Collapsible Group Item #3
      &lt;/a&gt;
      &lt;div id="collapseThree" class="collapse" data-parent="#accordion"&gt;
        &lt;div class="card-body"&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|224207|text|下面是Bootstrap+4.3的工作示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224208|​|224209|<script+src="https://code.jquery.com/jquery-3.3.1.slim.min.js"+integrity="sha384-q8i/X%2B965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH%2B8abtTE1Pi6jizo"+crossorigin="anonymous"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"+integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"+crossorigin="anonymous"></script>
<script+src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"+integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM%2BB07jRM"+crossorigin="anonymous"></script>

<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"+integrity="sha384-ggOyR0iXCbMQv3Xipma34MD%2BdH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"+crossorigin="anonymous">


<div+class="accordion"+id="accordionExample">
++++++++++++++++<div+class="card">
++++++++++++++++++++<div+class="card-header"+id="headingOne"+data-toggle="collapse"+data-target="#collapseOne"+aria-expanded="true"+aria-controls="collapseOne">
++++++++++++++++++++++++<h2+class="mb-0">
++++++++++++++++++++++++++++<button+class="btn+btn-link"+type="button"+>
++++++++++++++++++++++++++++++++Collapsible+Group+Item+#1
++++++++++++++++++++++++++++</button>
++++++++++++++++++++++++</h2>
++++++++++++++++++++</div>

++++++++++++++++++++<div+id="collapseOne"+class="collapse+show"+aria-labelledby="headingOne"+data-parent="#accordionExample">
++++++++++++++++++++++++<div+class="card-body">
++++++++++++++++++++++++++++
++++++++++++++++++++++++</div>
++++++++++++++++++++</div>
++++++++++++++++</div>
++++++++++++++++<div+class="card">
++++++++++++++++++++<div+class="card-header"+id="headingTwo"+data-toggle="collapse"+data-target="#collapseTwo"+aria-expanded="false"+aria-controls="collapseTwo">
++++++++++++++++++++++++<h2+class="mb-0">
++++++++++++++++++++++++++++<button+class="btn+btn-link+collapsed"+type="button"+>
++++++++++++++++++++++++++++++++Collapsible+Group+Item+#2
++++++++++++++++++++++++++++</button>
++++++++++++++++++++++++</h2>
++++++++++++++++++++</div>
++++++++++++++++++++<div+id="collapseTwo"+class="collapse"+aria-labelledby="headingTwo"+data-parent="#accordionExample">
++++++++++++++++++++++++<div+class="card-body">
++++++++++++++++++++++++++++
++++++++++++++++++++++++</div>
++++++++++++++++++++</div>
++++++++++++++++</div>
++++++++++++++++<div+class="card">
++++++++++++++++++++<div+class="card-header"+id="headingThree"+data-toggle="collapse"+data-target="#collapseThree"+aria-expanded="false"+aria-controls="collapseThree">
++++++++++++++++++++++++<h2+class="mb-0">
++++++++++++++++++++++++++++<button+class="btn+btn-link+collapsed"+type="button"+>
++++++++++++++++++++++++++++++++Collapsible+Group+Item+#3
++++++++++++++++++++++++++++</button>
++++++++++++++++++++++++</h2>
++++++++++++++++++++</div>
++++++++++++++++++++<div+id="collapseThree"+class="collapse"+aria-labelledby="headingThree"+data-parent="#accordionExample">
++++++++++++++++++++++++<div+class="card-body">
++++++++++++++++++++++++++++
++++++++++++++++++++++++</div>
++++++++++++++++++++</div>
++++++++++++++++</div>
++++++++++++</div>|code-block|syntax|javascript|224210|224211|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Here is the working example for Bootstrap 4.3 </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;


&lt;div class="accordion" id="accordionExample"&gt;
                &lt;div class="card"&gt;
                    &lt;div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
                        &lt;h2 class="mb-0"&gt;
                            &lt;button class="btn btn-link" type="button" &gt;
                                Collapsible Group Item #1
                            &lt;/button&gt;
                        &lt;/h2&gt;
                    &lt;/div&gt;

                    &lt;div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"&gt;
                        &lt;div class="card-body"&gt;
                            
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="card"&gt;
                    &lt;div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
                        &lt;h2 class="mb-0"&gt;
                            &lt;button class="btn btn-link collapsed" type="button" &gt;
                                Collapsible Group Item #2
                            &lt;/button&gt;
                        &lt;/h2&gt;
                    &lt;/div&gt;
                    &lt;div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"&gt;
                        &lt;div class="card-body"&gt;
                            
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="card"&gt;
                    &lt;div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;
                        &lt;h2 class="mb-0"&gt;
                            &lt;button class="btn btn-link collapsed" type="button" &gt;
                                Collapsible Group Item #3
                            &lt;/button&gt;
                        &lt;/h2&gt;
                    &lt;/div&gt;
                    &lt;div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"&gt;
                        &lt;div class="card-body"&gt;
                            
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>In a Bootstrap accordion, instead of requiring a click on the <code>a</code> text, I want to make it collapse when clicking anywhere in the <code>panel-heading</code> div.</p>

<p>I am using Bootstrap 3. So instead of accordion, it's just a collapsible panel. Any idea how to do the entire panel clickable?</p>


How to make a Bootstrap accordion collapse when clicking the header div?

在Bootstrap accordion中，我不需要单击a文本，而是希望在单击panel-heading div中的任意位置时将其折叠。我用的是Bootstrap 3，所以它不是手风琴，而是一个可折叠的面板。你知道怎么做整个面板可点击吗？

问如何在单击标题div时使Bootstrap折叠？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击标题div时使Bootstrap折叠？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击标题div时使Bootstrap折叠？
EN