Question

我能够使用此代码：

[data-field-name="HideAndShow"] {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[id="UniqueCheckbox"]:checked ~ [data-field-name="HideAndShow"] {
  opacity: 1 !important;
  max-height: 100px !important;
  overflow: visible !important;
  display: block !important;
}

<input id="UniqueCheckbox" type="checkbox">
<label>Click to show</label>
    
<div data-field-name="HideAndShow">
  Hide and Show This
</div>

在我试图设计的应用程序中，它在标签内部有输入，我无法使其工作：

[data-field-name="HideAndShow"] {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[id="UniqueCheckbox"]:checked ~ [data-field-name="HideAndShow"] {
  opacity: 1 !important;
  max-height: 100px !important;
  overflow: visible !important;
  display: block !important;
}

<label><input id="UniqueCheckbox" type="checkbox">Click to show</label>
    
<div data-field-name="HideAndShow">
  Hide and Show This
</div>

我造型的应用程序非常锁定，我无法更改它。有没有办法解决HTML结构锁定到位？理想情况下只使用CSS。

修改

我很高兴考虑使用jquery解决方案。

谢谢，

Answer 1

如果有兴趣的话，用jquery工作：

 
$(document).ready(function(){
    $("#UniqueCheckbox").click(function(){
  if ( typeof hidden === 'undefined' || hidden == true ) {
      $(document.querySelectorAll('[data-field-name="HideAndShow"]')).show(100); 
      hidden = false;
    } 
 else {
      $(document.querySelectorAll('[data-field-name="HideAndShow"]')).hide(100); 
      hidden = true;
  }
      });  
});

[data-field-name="HideAndShow"] {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>


<label><input id="UniqueCheckbox" type="checkbox">Click to show</label>
    
<div style="" data-field-name="HideAndShow">
  Show and Hide This
</div>

Answer 2

问题是~选择器。见W3C

~在前一个参数之后立即选择元素。因此，当您在第一个示例中使用HTML时，它可以正常工作，因为它会在 #UniqueCheckbox

之后的元素中查找该数据名称属性
在使用你的代码之后，使用纯CSS（我可以看到），即使是转换也没有简单的方法。嵌套HTML的方式对于使用CSS来说是太奇怪了......实际上，它不是很难定位 - 但是使用：checked伪类作为触发事件来改变另一个div，是这种情况，做起来很奇怪。在其他示例（如下拉列表）中，当使用伪造的类作为触发器时，您将看到触发的元素通常是内部那个调用伪类的元素。

Look at this dropdown menu example 并注意nav li:hover ul如何与HTML的结构以及如何工作

我建议使用jQuery ala this
的简单点击处理程序

：当输入标记位于标签标记CSS内时，检查不起作用

2 个答案: