单击整个标题div时如何使Bootstrap v4手风琴折叠？

时间：2017-01-05 12:16:55

标签： html css bootstrap-4 twitter-bootstrap-4

最初，当点击有文本的区域时，bootstrap v4手风琴可折叠。如何让它可以折叠到整个区域。

这里是bootstrap的代码。

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

5 个答案:

答案 0 :(得分：4)

将此样式添加到您的css 

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

尝试使用demo，运行代码段并点击全屏视图

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

</style>
<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

答案 1 :(得分：2)

只是更改锚定顺序，我还没有找到另一个简单的解决方案。

请注意，此时v4的bootstrap处于alpha版本中，此时正在发出一些奇怪的脚本错误。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>



<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <div class="card-header" role="tab" id="headingOne" >
      <h5 class="mb-0">
        
          Collapsible Group Item #1
        
      </h5>
    </div>
</a>
    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <div class="card-header" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion">
      <h5 class="mb-0">
    
          Collapsible Group Item #2
        
      </h5>
    </div>
    </a>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：2)

只需在标题div上使用<div class="card-header" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> <h5 class="mb-0"> <a href> Collapsible Group Item #1 </a> </h5> </div> .. 

@model CMSAdminPanel.ViewModel.ProductView
<h4>Material And Labour Cost For Each Size</h4>
<hr />
@Html.ValidationSummary(false, "", new { @class = "text-danger" })
@for (int i = 0; i < Model.ServiceView.ListPriceView.Count; i++)
{
    @Html.HiddenFor(x => x.ServiceView.ListPriceView[i].ProductSizeType)
    <div class="form-group">
        @Html.LabelFor(x => x.ServiceView.ListPriceView[i].ProductSizeTypeName, "Size - " + Model.ServiceView.ListPriceView[i].ProductSizeTypeName, htmlAttributes: new { @class = "control-label col-md-4" })
    </div>

    <div class="form-group">
        @Html.LabelFor(x => x.ServiceView.ListPriceView[i].LabourCost, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(x => x.ServiceView.ListPriceView[i].LabourCost, new { htmlAttributes = new { @class = "form-control", required = "required"} })
            @Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].LabourCost,"", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(x => x.ServiceView.ListPriceView[i].MaterialCost, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(x => x.ServiceView.ListPriceView[i].MaterialCost, new { htmlAttributes = new { @class = "form-control", required = "required" } })
            @Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].MaterialCost, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(x => x.ServiceView.ListPriceView[i].Profit, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(x => x.ServiceView.ListPriceView[i].Profit, new { htmlAttributes = new { @class = "form-control", required = "required" } })
            @Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].Profit, "", new { @class = "text-danger"})
        </div>
    </div>
}

weblogic.xml Doc

答案 3 :(得分：0)

Bootstrap 4.3添加了.stretched-link实用程序类。使用此功能，您可以相当容易地将.stretched-link添加到链接，并将.position-relative添加到卡头。

使用问题中的示例：

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header position-relative" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="stretched-link">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header position-relative" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed stretched-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Bootstrap documentation中有很多文档以及其他示例。

答案 4 :(得分：0)

我之所以选择使用Accordion，是因为我的一些客户要求比较2个答案，但是主要是因为使用我测试了1000个问题的简单HTML5 Details控件的效率！在一个常见问题解答页面中，可以估算出我的新客户。手风琴的问题始于140个项目，请参阅https://github.com/twbs/bootstrap/issues/26419

这是最简单有效的解决方案，具有完全控制和自动的“全部折叠”按钮出现和消失的功能。 如果您想在实际网站上看到更高级的实现，请执行以下操作： https://airtempheating.com/faq 

<details>
<summary>
  The temperature in my home feels fine, but the indoor fan runs constantly. What’s wrong?</summary>
When you switch the fan to “On” versus “Auto” your indoor fan will run continuously. Turn the switch to “Auto” and the fan will run only as needed.
</details>
<details>
<summary>
  Is there any advantage to setting the thermostat fan setting to “On” or “Auto” mode all the time?</summary>
Yes! You will have constant filtering of the air. A second advantage is that the constant airflow will allow an even temperature throughout your home. 
However, if your home feels very humid, set the fan to the “Auto” mode.
</details>
<details>
<summary>
  How long does a typical furnace or air conditioner last?</summary>
New air conditioning and heating equipment lasts longer than ever! The end of a furnace's or air conditioner’s service life depends on more than just chronological age. 
Energy-efficiency issues and the price of any necessary repairs versus the cost of upgrading to a new unit all enter into that determination.
</details> <hr>    
<button type="button" id="hdn" class="btn btn-primary" onClick="window.location.reload();">Collapse All</button>

<style>
#hdn{display:none; visibility:visible}
</style>

<script>
$(function() {$('summary').click(function() {if($('#hdn').css("display") == "none"){$('#hdn').show();}});});
</script>
相关问题
最新问题