如何使用 HTML 和 CSS 隐藏和显示可点击的内容？答案

【问题标题】：How to hide and show clickable content using HTML & CSS?如何使用 HTML 和 CSS 隐藏和显示可点击的内容？
【发布时间】：2015-09-04 22:13:14
【问题描述】：

我了解其他人提出了类似的问题，并且我已经查看了其他用户的回答，但仍然难以理解该怎么做...

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

这是我的 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');
  });
});

谢谢！

【问题讨论】：

为什么不能使用 JavaScript？
这个答案应该可以帮助你stackoverflow.com/questions/32395914/…
检查这个：question
使用javascript自定义样式比较困难，我想看看是否有更简单的方法来做到这一点。不过，我并没有试图绕过这个问题......如果你知道一种使用 javascript 来解决问题的方法，那也很好。
你需要javascript，不，它不会干扰你的css。

标签： html css

【解决方案1】：

您可以在 CSS 中使用“显示”来显示和隐藏内容。更多使用方法在这里：http://www.w3schools.com/css/css_display_visibility.asp

例子：

h1.hidden {
    display: none;
}

【讨论】：

【解决方案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);
  }
}

使用同级和选中选择器，我们可以根据复选框输入元素的选中状态确定>同级元素的样式。一个 >use，正如这里所展示的，是一个完全 CSS 和 HTML 的手风琴元素。媒体 >查询用于使元素响应不同的屏幕尺寸。

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

【讨论】：

我查看了链接，它确实解释了我正在寻找的最终结果，但我对编程还很陌生，我应该从中收集的内容没有点击（然而）自动。您是否介意澄清您的答案中提到的选择器的哪种组合可以用于我的代码？或者至少让我迈出第一步，让我朝着正确的方向前进？谢谢你的资源！

【解决方案3】：

您可以在技术上使用 :focus。

为什么不使用 jQuery 呢？

【讨论】：