无法正确显示手风琴折叠

Question

手风琴显示的结果没有响应

我正在学习折叠手风琴。我为正在创建的手风琴页面添加了 css。我已成功实现 Accordion Collapse，但结果没有响应。

我这样写代码

.MaskGrid {
  margin-top: 24px;
  margin-left: 24px;
  width: 327px;
  height: 80px;
  border-radius: 5px;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 1px 18px 0 rgba(0, 0, 0, 0.05), 0 6px 10px 0 rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}
.Prefilled {
  margin-top: 16px;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
  width: 295px;
  height: 48px;
  background-color: transparent;
}
.box {  
  padding: 1.25rem;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 327px;
  height: 317px;
  border-radius: 5px;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 1px 18px 0 rgba(0, 0, 0, 0.05), 0 6px 10px 0 rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}
.address---street-name {
  width: 295px;
  height: 280px;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.54;
  letter-spacing: normal;
  color: #1f2d3d;
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <style type="text/css">
     [aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {
      display: none;
     }
      </style>
</head>
    
    <body>
<div class="container">
     <div class="row" id="accordion">
      <!-- one -->
         <div class="MaskGrid">
             <div class="Prefilled card-link" data-toggle="collapse" href="#menuone" aria-expanded="false" aria-controls="menuone">
               <div class="NameText">Menu One</div>
                        <span class="collapsed"><i><img src="https://i.ibb.co/QXC72Qr/sa-arrow-down.png" class="sa-arrow-down"></i></span> 
                        <span class="expanded"><i><img src="https://i.ibb.co/xzFDHvj/sa-arrow-up.png" class="sa-arrow-up"></i></span>    
             </div>
             <div id="menuone" class="collapse">
              <div class="card-body box">
         <div class="address---street-name">
               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
         </div>
        </div>
       </div>
         </div>
      <!-- two -->
         <div class="MaskGrid">
             <div class="Prefilled card-link" data-toggle="collapse" href="#menutwo" aria-expanded="false" aria-controls="menutwo">
               <div class="NameText">Menu Two</div>
                        <span class="collapsed"><i><img src="https://i.ibb.co/QXC72Qr/sa-arrow-down.png" class="sa-arrow-down"></i></span> 
                        <span class="expanded"><i><img src="https://i.ibb.co/xzFDHvj/sa-arrow-up.png" class="sa-arrow-up"></i></span>         
             </div>
             <div id="menutwo" class="collapse">
              <div class="card-body box">
         <div class="address---street-name">
               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
         </div>
        </div>
       </div>
         </div>
     </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>
    
</html>

我想在选择 MenuOne 或 Menutwo 时制作手风琴菜单响应式显示

谢谢

Answer 1

我稍微修改了您的代码以使其能够正确响应。

因为一些 bootstrap 规则你需要知道 .row bootstrap class 有一个 显示: flex; 并且任何 flex div 都有 child div 所以 child div 也采用 display: flex ;

所以，如果你没有在 flex child 中添加额外的 div，那么你的 div 调用 .MaskGrid 已经 显示：弹性；

如果您的手风琴数据不可见，那么在 flex 兄弟之后 divs 在任何情况下总是采用相同的高度。

喜欢下面的截图：

此外，我已经为响应式设计添加了视口，如果您还没有添加，请添加。

修改后的代码如下：

HTML代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <!-- added viewport for responsive design -->
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style type="text/css">
            [aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="row" id="accordion">
                <div class="col-auto"> <!-- added extra parent div -->
                    <!-- one -->
                    <div class="MaskGrid">
                        <div class="Prefilled card-link" data-toggle="collapse" href="#menuone" aria-expanded="false" aria-controls="menuone">
                            <div class="NameText">Menu One</div>
                            <span class="collapsed"><i><img src="https://i.ibb.co/QXC72Qr/sa-arrow-down.png" class="sa-arrow-down"></i></span>
                            <span class="expanded"><i><img src="https://i.ibb.co/xzFDHvj/sa-arrow-up.png" class="sa-arrow-up"></i></span>
                        </div>
                        <div id="menuone" class="collapse">
                            <div class="card-body box">
                                <div class="address---street-name">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- two -->
                </div>
                <div class="col-auto">  <!-- added extra parent div -->
                    <div class="MaskGrid">
                        <div class="Prefilled card-link" data-toggle="collapse" href="#menutwo" aria-expanded="false" aria-controls="menutwo">
                            <div class="NameText">Menu Two</div>
                            <span class="collapsed"><i><img src="https://i.ibb.co/QXC72Qr/sa-arrow-down.png" class="sa-arrow-down"></i></span>
                            <span class="expanded"><i><img src="https://i.ibb.co/xzFDHvj/sa-arrow-up.png" class="sa-arrow-up"></i></span>
                        </div>
                        <div id="menutwo" class="collapse">
                            <div class="card-body box">
                                <div class="address---street-name">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>

</html>

CSS代码：

.MaskGrid {
margin-top: 24px;
margin-left: 24px;
width: 327px;
height: auto; /*change 80px to auto*/
border-radius: 5px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 1px 18px 0 rgba(0, 0, 0, 0.05), 0 6px 10px 0 rgba(0, 0, 0, 0.05);
background-color: #ffffff;
}
.Prefilled {
margin-top: 16px;
margin-left: 16px;
margin-right: 16px;
margin-bottom: 16px;
width: 295px;
height: 48px;
background-color: transparent;
}
.collapse.show .box { /*added .collapse.show*/
padding: 1.25rem;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 327px;
height: 317px;
border-radius: 5px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 1px 18px 0 rgba(0, 0, 0, 0.05), 0 6px 10px 0 rgba(0, 0, 0, 0.05);
background-color: #ffffff;
}
.collapse.show .address---street-name { /*added .collapse.show*/
width: 295px;
height: 280px;
font-family: sans-serif;
font-size: 13px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.54;
letter-spacing: normal;
color: #1f2d3d;
}

请尝试此代码，如果您有任何问题，请告诉我。

Answer 2

你可以使用这个基于 bootstrap 4 和 jquery 的手风琴，它响应良好:)

HTML:

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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">
  </head>
  <body>
      <section id="faq">
          <div class="faq container">
            <div class="row">
              <div class="heading col-xs-12 col-sm-12 col-lg-12">
                  <h1>FAQ</h1>
                <h2 class="accordion-header">Accordio Element 1</h2> 
                <div class="accordion-content"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed id semper risus in hendrerit. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus.</p> 
                </div> 
                <h2 class="accordion-header">Accordio Element 2</h2> 
                <div class="accordion-content"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p> 
                </div> 
                <h2 class="accordion-header">Accordio Element 3</h2> 
                <div class="accordion-content"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur a erat nam at lectus urna duis convallis convallis. Condimentum vitae sapien pellentesque habitant morbi. Ornare arcu dui vivamus arcu felis bibendum ut tristique et.</p> 
                </div> 
                <h2 class="accordion-header">Accordio Element 4</h2> 
                <div class="accordion-content"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis donec et odio pellentesque diam volutpat commodo sed. At auctor urna nunc id cursus metus aliquam eleifend. A diam maecenas sed enim.</p>
                    <p>Arcu non sodales neque sodales ut etiam. At lectus urna duis convallis convallis tellus id interdum velit. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Amet nisl suscipit adipiscing bibendum est ultricies integer quis.</p> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam non nisi est sit amet facilisis magna etiam tempor. Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Hac habitasse platea dictumst quisque. Nec dui nunc mattis enim.</p>
                </div> 
                <h2 class="accordion-header">Accordio Element 5</h2> 
                <div class="accordion-content"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et malesuada fames ac turpis egestas sed tempus urna. Nulla facilisi morbi tempus iaculis urna. Curabitur vitae nunc sed velit dignissim sodales ut eu sem.</p> 
                </div> 

              </div>
            </div>
          </div>
      </section>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

      <!-- scripts js -->
      <script>
          $('.accordion-header').toggleClass('inactive-header');

        //Set The Accordion Content Width
        var contentwidth = $('.accordion-header').width();
        $('.accordion-content').css({'width' : contentwidth });

        //Open The First Accordion Section When Page Loads
        $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
        $('.accordion-content').first().slideDown().toggleClass('open-content');

        // The Accordion Effect
        $('.accordion-header').click(function () {
          if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
          }

          else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
          }
        });
      </script>
  </body>

CSS:

#faq{
    padding: 50px 0;
    border-bottom-width: 1px !important;
    border-bottom-color: #e4e4e4 !important;
    border-bottom-style: solid !important;
}
.accordion-header {
    font-size: 16px;
    text-align: left;
    background: #f5f5f5;
    margin: 6px 0 0 0;
    padding: 13px 20px;
    border: 1px solid #cccccc;
    cursor: pointer;
    color: #666666;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.accordion-content {
    width: 100% !important;
    display: none;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-top: 0;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
.active-header {
    background-color: #ccad52;
    color: black;
    transition: 0.2s;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}
.active-header:hover {
    background-color: #ccad52;
    color: black;
}
.inactive-header {
    background-color: #ebebeb;
    transition: all .2s ease-in-out;
}
.inactive-header:hover {
    background-color: #eaeaea;
}
.active-header:after {
    content: "\f107";
    right: 0;
    float: right;
    font-family: FontAwesome;
    color: #886708;
}
.inactive-header:after {
    content: "\f105";
    right: 0;
    float: right;
    font-family: FontAwesome;
    animation: czAccArrowFX .4s forwards;
    color: #b79531;
}

无法正确显示手风琴折叠

Can't display the accordion collapse properly

css

accordion

twitter-bootstrap