Onclick 显示/隐藏仅 div 且不带 href 的 css。没有jQuery

Posted 2023-03-06

【中文标题】Onclick 显示/隐藏仅 div 且不带 href 的 css。没有jQuery

【英文标题】：Onclick show/hide a div -only css and without href. NO jquery

【发布时间】：2017-09-15 07:23:56

【问题描述】：

最初对用户可见的框是带有文本“hey there and hello”的蓝色框。用户点击hello后，带有“how to”文本的灰色框占据了蓝色框的空间，hello文本变为“关闭”通过css添加的文本内容。

现在，当我单击关闭时，灰色框再次消失，蓝色框再次出现，并带有文本“嘿，你好”。我试过使用焦点，但它没有帮助。

下面是我尝试使用的 css。如果我能得到一些帮助，那就太好了。对焦不灵了。只需要使用 css。没有锚链接或 href，它都是关于纯文本的。

.blue-card 
  height: auto;
  min-height: 100px;
  display: block;
  padding: 1em;
  background: #FFFFFF;
  box-shadow: 0 6px 12px 0 rgba(27, 29, 31, 0.05);
  border-radius: 10px;
  position: relative;
  margin-bottom: 10px;




.grey-card 
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  margin: 20px;
  max-height: 155px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2em;
  font-size: 14px;
  line-height: 24px;
  transition: 0.25s;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transform: scale(1.4) translateY(-100px);
  -webkit-transform: scale(1.4) translateY(-100px);
  -moz-transform: scale(1.4) translateY(-100px);


.grey-card 
  padding: 10px;
  font-size: 13px;
  min-height: 100px;


.grey-card 
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  -webkit-transform: scale(1) translateY(0);
  -moz-transform: scale(1) translateY(0);


.grey-card-text 
  display: none;


.blue-box-text:focus~.grey-box 
  display: block;


.grey-box-text:focus~.blue-box-text 
  display: block;


.grey-box-text:before 
  content: "Close";
  font-size: 12px !important;

<div class="box-main">
  <div class="blue-card">
    <p class="blue-box-description">hey there</p>
    <div class="gs-c">
      <span class="blue-box-text">hello</span>
    </div>
  </div>
  <div class="grey-card">
    <h4 class="grey-box-text">How to?</h4>
  </div>
</div>

【问题讨论】：

标记在哪里？

html 部分在哪里？

@LokeshGupta 发帖

您是否尝试过使用“复选框黑客”？或者那也是不允许的

@MihaiT 所说的。将灰色框变成复选框的标签，使复选框不可见并使用~。

【参考方案1】：

有一种技巧可以使用 Check box hack 来实现您的目标

请看下面的例子

#myid 
  display: none;


#mylabel:after 
  content: 'Hello';


#myid:checked~#mylabel:after 
  content: 'Close';

<div>
  <input id="myid" type="checkbox">
  <label id="mylabel" for="myid"></label>
</div>

如果您想在 html 中使用文本 Hello 并在 css 中使用 Close 文本，您可以使用：

#myid 
  display: none;


.box 
  position: relative;


#mylabel 
  display: inline-block;


#myid:checked~#mylabel:after 
  content: 'Close';
  position: absolute;
  top: 0;


#myid:checked~#mylabel 
  width: 0px;
  overflow: hidden;

<div class="box">
  <input id="myid" type="checkbox">
  <label id="mylabel" for="myid">Hello</label>
</div>

【讨论】：

谢谢，但在这里您甚至使用 css 添加了 hello，只有 close 必须使用 css 添加，这在某种程度上很有帮助。剩下的文本框只有在我们点击 hello 时才会显示出来.....我已经对上面的代码进行了更改，请检查一次

雅@koku19 请为这个好答案+1，aw zidlou +1。

谢谢@bRIMOs :), ya lkhchine :p

【参考方案2】：

您可以使用flexbox 技巧来更改您的盒子的顺序。这将使您能够以两种方式使用相邻兄弟选择器，从而解决 CSS 中缺少上一个兄弟选择器的问题。

想法：

将包装容器设置为display:flex。让你的目标divs 相对于这个包装父级绝对定位。使用tabindex 强制div 获得焦点。更改焦点时彼此的顺序以及不透明度和位置以辅助transition 效果。

示例片段：

*  box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; 
.wrap  display: flex; position: relative; width: 260px; 
.blue, .gray 
  position: absolute;
  width: 120px; height: 3em; 
  margin: 4px; padding: 8px;
  cursor: pointer; transition: all 0.5s;

.blue  
  order: 1; left: 0; opacity: 1;
  background-color: #33d; 

.gray  
  order: 2; left: 50%; opacity: 0;
  background-color: #bbb; 

.blue:focus + .gray  order: 1; left: 0; opacity: 1;
.blue:focus  order: 2; left: 50%; opacity: 0; 

.gray:focus + .blue  order: 1; left: 0; opacity: 1; 
.gray:focus  order: 2; left: 50%; opacity: 0; 

.blue::after  content: 'Hello'; color: #fff; 
.gray::after  content: 'Close'; color: #333; 

<div class="wrap">
  <div class="blue" tabindex="1"></div>
  <div class="gray" tabindex="2"></div>
</div>

---

陷阱：

一旦焦点从默认值改变，相关属性也随之改变；然后失去焦点会将元素重置为默认值。这实际上意味着您不再需要单击灰色的div 来重置。您可以单击文档上的任意位置，状态将重置。

学习：

虽然这实现了你想要的，即没有锚点、没有输入、没有复选框、没有 javascript 等，但这不会带你走太远，而且除了表明它可以以某种方式完成之外没有任何意义。使用专门用于特定目的的工具。