Question

我试图通过CSS隐藏div。 div hide在表单内部工作，如何在表单之外完成，甚至在div行之外？

HTML

<div class="row">
    <form>
        <input type="radio" name="radio" value="show" checked/>Show <br>
        <input type="radio" name="radio" value="hide"/>Hide

        <div class="hideDiv">
            <p>Can you see me</p>
        </div>
    </form>  
</div>

CSS

input[type=radio][value="hide"]:checked ~ .hideDiv {
    display: none;
}

最好只有css但javascript也是一种选择。

Answer 1

使用较少的CSS特异性。

 https://www.html5rocks.com/en/tutorials/cors
 https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check

Answer 2

也许与此代码相似的内容会有所帮助？

<input type="radio" name="radio" onclick="hideFunc();" value="show" checked/>Show <br> 
<input type="radio" name="radio" onclick="hideFunc();"  value="hide"/>Hide
<script>
hideFunc = function() {
   if (document.getElementsByClassName('hideDiv')[0].style.display == "none")
      document.getElementsByClassName('hideDiv')[0].style.display = "block";
   else
      document.getElementsByClassName('hideDiv')[0].style.display = "none";
}
</script>

Answer 3

你可以试试这个：

喜爱

我试图通过CSS隐藏div。 div hide在表单内部工作，如何在表单之外完成，甚至在div行之外？

HTML

<div class="row">
    <form>
        <input type="radio" name="radio" value="show" onclick="hideDiv();" checked/>Show <br>
        <input type="radio" name="radio" onclick="hideDiv();" value="hide"/>Hide

        <div class="hideDiv">
            <p>Can you see me</p>
        </div>
    </form>  
</div>

JS

function hideDiv() {
    var aux = $('input[name="radio"]:checked').val();
    if (aux == 'show'){
        $('.hideDiv').css("display","block");
    }else{
        $('.hideDiv').css("display","none");
    }
}

Answer 4

你可以使用jquery

轻松完成

$('.chkToogle').click(function(){
	$('.hideDiv').fadeToggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <form>
        <input type="checkbox" class="chkToogle" checked/>Show/Hide
		</form>  
</div>
<div class="hideDiv">
	<p>Can you see me</p>
</div>

CSS隐藏div与radiobutton外形式

4 个答案: