Question

据我所知，其他人也提出了与此相似的问题，而且我已经查看了其他用户的答案，但仍然难以理解该怎么做......

目前在我网站的其中一个页面上，所有可折叠内容都会自动显示，并在您点击它时隐藏。我希望相反，默认情况下隐藏所有可折叠内容，并且您必须单击可折叠内容才能查看其中的嵌套内容以进行显示。

这是我的CSS：

body{
      display: block;
    }
li{
    list-style-type: none;
    text-align:left;
    padding:3.5px;
    position:relative;
   }
.hhhh{
    text-align:left;
    }
h2{
    text-align:center;
   } 
h7{
    font-size:15px;
  }
span{
    text-align:left;
    }

这是我的HTML：

 <body>
     <h2>Industries Served</h2>
     <div id="ListContainer">
        <ul id="expList">
            <li>
                <h7 style="font-family:14px">
                <i class="fa fa-caret-right"></i> Aerospace & Aeronautics 
                </h7>
                <ul>
                    <li>
                        <div>
                        <div> 
                            <p class="alert"> ......... </p>
                        </div>
                        </div>
                    </li>
                </ul>
           </li>
           <li>
               <h7>
                   Agriculture & Food Science
               </h7>
               <ul>
                   <li>
                       <div>
                           <p> ......... </p>
                       </div>
                   </li> 
               </ul>
          </li>
          <li>
               <h7>
                    Alternative Energy & Clean Technology
               </h7>
               <ul>
                   <li>
                       <div>
                       <p> ......... </p>
                       </div>
                   </li>
               </ul>                       
           </li>
       </ul>
</div>

这是我的javascript：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('.markdown-block .sqs-block-content h7').css('cursor','pointer');
        $(".markdown-block .sqs-block-content h7").click(function(){
        $(this).nextUntil("h7").slideToggle()
        $(this).find('.fa-caret-right').toggleClass('fa-rotate-90');
  });
});

谢谢！

Answer 1

您可以使用＆＃39;显示＆＃39;在CSS中显示和隐藏内容。有关如何在此处使用的更多信息：http://www.w3schools.com/css/css_display_visibility.asp

示例：

h1.hidden {
    display: none;
}

Answer 2

您可以使用css3 animation，opacity，transform和hover/click selectors的组合来实现这一目标。

以下是一个代码集，向您展示了执行此操作的一般方法：http://codepen.io/abergin/pen/ihlDf其中使用了css3 keyframes。这是来自codepen的动画关键帧之一：

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

使用兄弟和选中的选择器，我们可以根据复选框输入元素的选中状态确定＆gt;兄弟元素的样式。如此处所示，一个＆gt;使用完全是CSS和HTML手风琴元素。媒体＆gt;查询用于使元素响应不同的屏幕尺寸。

通过 - http://codepen.io/abergin/pen/ihlDf

Answer 3

您可以使用：专注于技术。

为什么不使用jQuery呢？

如何使用HTML＆amp; amp;隐藏和显示可点击的内容CSS？

3 个答案: