Question

我想仅使用css切换div和up-down箭头。我想在div底部的一个链接关闭div（Less）

这些是我面临的一些问题 -

关闭底部div的链接越少，在Firefox和Internet Explorer中无效
切换之外的箭头除了标题之外没有显示，但在标题下面没有显示，并且它们在firefox和Internet Explorer中根本没有显示
上下箭头元素上出现一个微弱的奇特轮廓
编辑 - 切换收件箱也未隐藏在Firefox和Internet Explorer中

根据Jibbow的建议，我已经取代了＆＃34; a＆＃34;标签用＆＃34; span＆＃34;标签链接较少，现在正在工作

这是我的代码 -

Html -

<label class="label" for="_1">Stack OverFlow - Aim of Website - To discuss   
good questions about good code and code development</label>

<input class="toggle-inbox" id="_1" type="checkbox" >

<div id="text-contents-details1">Lorem ipsum dolor sit amet, consectetuer   
adipiscing. &nbsp;&nbsp;

<label href="#clear" class="less" for="_1"><span id="less" style="color:darkorange;" class="arrow-  
less">Less</span></label>
</div>

Css -

.label {
float:left;
font-size: 29px; 
}

.toggle-inbox {
display: none;
visibility: 0;
float: left;
}

label +.toggle-inbox {
cursor: pointer;
display: block;
font-weight: bold;
line-height: 21px;
margin-bottom: 20px;
float:left;
}

label + .toggle-inbox + div#text-contents-details1 {
display: none;
margin-bottom: 10px;
clear :both;
}

label + .toggle-inbox:checked + div#text-contents-details1 {
display: block;

 }

 label +.toggle-inbox:after {

 background-color:white ;
 border-right: 3px solid black; 
 border-bottom: 3px solid black; 
 width: 10px; 
 height: 10px; 
 transform: rotate(45deg); 
 -webkit-transform: scale(1) rotate(45deg) translate(0px, 0px); 
-moz-transform: rotate(45deg) scale(1.0);
-o-transform: rotate(45deg) scale(1.0);
 margin-top: 0px;
 float: left;
 content: "";
 margin-right:5px;
 }

 label + .toggle-inbox:checked:after {
 border-right: 3px solid black;
 border-bottom: 3px solid black;
 width: 10px;
 height: 10px;
 transform: rotate(-135deg);
-webkit-transform: scale(1) rotate(-135deg) translate(0px, 0px);
-moz-transform: rotate(-135deg) scale(1.0);
-o-transform: rotate(-135deg) scale(1.0);
 margin-top: 0px;
 float: left;
 margin-right: 0px;
 margin-top:0px;
 content: "";
 }
 .toggle-inbox + div#text-content-details1 + .less {
 visibility : 0px ;

 }

http://codepen.io/anon/pen/bVNZJL

请建议

Answer 1

为了减少链接工作，您可以将a标记替换为span。要获得完整的功能，您可以将cursor: pointer;添加到span。

显示的复选框是因为您设置了display: none;，但其他地方也设置了display: block;。第二个是覆盖第一个。正确的代码：

.toggle-inbox {
     display: none;
     visibility: 0;
     float: left;
     }

label +.toggle-inbox { /*you could also remove 'label' here*/
     cursor: pointer;
     /*removed display: block;*/
     font-weight: bold;
     line-height: 21px;
     margin-bottom: 20px;
     float:left;
     }

在考虑了你的'箭头'之后，我得出结论，你想要勾选复选框以便看起来像箭头，对吗？这不容易做到。您通常会隐藏您的复选框并为其添加另一个标签。尝试设置复选框的样式可能会导致您的第三个问题在我继续这里之前，有些人认为你必须改变：
- 您应始终将input置于所有labels之上。这是因为在CSS中您只能选择以下元素。
- 您应该将+的大多数内容更改为~。这是因为+仅选择 next 元素。 ~因选择以下元素而更加灵活。因此，您可以将.toggle-inbox + div#text-content-details1 + .less缩短为.toggle-inbox ~ .less
- 您可以缩短CSS：label +.toggle-inbox（几乎）等于.toggle-inbox（差异：第一个选择.toggle-inbox之后的所有label;第二个选择全部.toggle-inbox <div> <input class="toggle-inbox" id="_1" type="checkbox"> <label class="label" for="_1">Stack OverFlow - Aim of Website - To discuss good questions about good code and code development</label> <div id="text-contents-details1">Lorem ipsum dolor sit amet, consectetuer adipiscing.    <label href="#clear" class="less" for="_1"><span id="less" style="color:darkorange;" class="arrow-less">Less</span></label> </div> </div>）

所以整个代码（清理并希望更正）：

HTML：

.label {
  font-size: 29px;
}

.toggle-inbox {
  display: none;
}

.less {
  cursor: pointer;
}

.toggle-inbox ~ div#text-contents-details1 {
  display: none;
  margin-bottom: 10px;
  clear: both;
}

.toggle-inbox:checked ~ div#text-contents-details1 {
  display: block;
}

.label::after {
  background-color: white;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  width: 10px;
  display: inline-block;
  height: 10px;
  transform: rotate(45deg);
  -webkit-transform: scale(1) rotate(45deg) translate(0px, 0px);
  -moz-transform: rotate(45deg) scale(1.0);
  -o-transform: rotate(45deg) scale(1.0);
  margin-top: 10px;
  content: "";
  margin-left: 5px;
}

.toggle-inbox:checked ~.label::after {
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  transform: rotate(-135deg);
  -webkit-transform: scale(1) rotate(-135deg) translate(0px, 0px);
  -moz-transform: rotate(-135deg) scale(1.0);
  -o-transform: rotate(-135deg) scale(1.0);
}

CSS：

{{1}}

http://codepen.io/anon/pen/QjbboK明确适用于IE11和Firefox 40：）

如何仅使用css切换div和up-down箭头

1 个答案: