如何使用HTML隐藏和显示可单击的内容&；CSS？_Html_Css

如何使用HTML隐藏和显示可单击的内容&；CSS？

html css

如何使用HTML隐藏和显示可单击的内容&；CSS？,html,css,Html,Css,我知道其他人也问过类似的问题，我已经看过其他用户的答案，但仍然很难理解该怎么做目前在我的网站上的一个页面上，所有可折叠的内容都会自动显示，当你点击它时会隐藏起来。我希望相反，默认情况下所有可折叠内容都是隐藏的，您必须单击可折叠内容才能查看其中的嵌套内容这是我的CSS： body{ display: block; } li{ list-style-type: none; text-align:left; padding:3.5px; posi

我知道其他人也问过类似的问题，我已经看过其他用户的答案，但仍然很难理解该怎么做

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

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


$（文档）.ready（函数（）{
$（'.markdown block.sqs block content h7'）.css（'cursor'，'pointer'）；
$（“.markdown block.sqs block content h7”）。单击（函数（）{
$（this.nextUntil（“h7”）.slideToggle（）
$（this）.find（'.fa插入符号right'）.toggleClass（'fa-rotate-90'）；
});
});

谢谢大家!

您可以使用：技术聚焦

为什么不使用jQuery呢

您可以在CSS中使用“显示”来显示和隐藏内容。有关如何在此处使用的更多信息：

例如：

h1.hidden {
    display: none;
}

您可以通过组合使用

css3动画

、

不透明度

、

变换

和

悬停/单击选择器

来实现这一点

下面是一个代码笔，向您展示了执行此操作的一般方法：使用css3

关键帧

。以下是代码笔中的一个动画关键帧：

@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);
  }
}

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

通过-

为什么不能使用JavaScript？这个答案应该可以帮助您检查一下：使用JavaScript定制样式更困难，我想尝试一下是否有更简单的方法来实现。不过我并不是想在这个问题上走捷径。。。如果你知道一种使用javascript来解决这个问题的方法，那也没问题。你需要javascript，不，它不会干扰你的css。我看了一下链接，它确实解释了我要寻找的最终结果，但我对编程相当陌生，我应该从中获得的信息不会自动点击（现在）。您是否介意澄清您的答案中提到的选择器的哪种组合可用于我的代码？或者至少给我第一步，让我走上正确的方向？谢谢你的资源！