带复选框的目标div

我有一个隐藏/显示div的复选框。当我将复选框直接放在div上方时，它可以工作。当我把复选框放在页面的其他地方时（为了更好的可用性），它不起作用。有没有一种方法来定位某个div，使该复选框可以在网页上的任何地方工作？带复选框的目标div

下面是HTML代码：

<input type="checkbox" id="toggle-result" checked="checked"> </input>

CSS：

input[type=checkbox]:checked ~ div { 
    display: none; 
}

来源

2013-05-22 Krystian

有可能是打碎的功能额外的代码的页面。您可能需要多发一点（页面上的内容）代码。我以前有过这个确切的问题。 – Supplement

查看http://stackoverflow.com/questions/10782054/what-does-the-css-tilde-squiggle-twiddle-selector-do。将div移动到其他位置会破坏您的选择器。 – Chris

使用CSS，你可以选择子元素和相邻的元素，所以你正在尝试做的会，如果div工作在该复选框后立即放置，但如果你想在div是其他地方（复选框之上）它的工作，你需要使用JavaScript，如果是后，您可以使用+选择相邻元素或嵌套相邻元素

Demo

<input type="checkbox" /> 
<div>Toggle Using CSS</div> 

input[type=checkbox]:checked + div { 
    display: block; 
} 

div { 
    display: none; 
}

靶向div这是更远的地方（而不是checkbox前）这样

Demo 2

input[type=checkbox]:checked + a + .blah .target { 
    display: block; 
} 

.target { 
    display: none; 
} 

<input type="checkbox" /> 
<a href="#">Dummy Link</a> 

<div class="blah"> 
    <div class="target">Complicated Selector, Isn't It?</div> 
</div>

说明：input[type=checkbox]:checked + a + .blah .target在这里我们选择chec kbox处于检查状态，并且我们通过选择相邻元素即锚定标记并且比我们选择另一个相邻元素邻近a 标记div具有类别.blah，并且比我们选择嵌套子元素与类.target

使用jQuery做（哪里并不重要目标元素是）Demo 3

<input type="checkbox" id="checkme" /> 
<a href="#">Dummy Link</a> 
<div id="show_on_check" style="display:none"> 
    This content should appear when the checkbox is checked 
</div> 

$(document).ready(function() { 
    $('#checkme').change(function() { 
     $('#show_on_check').toggle(); 
    }); 
});

来源

2013-05-22 14:19:19

外星人先生谢谢你！ – Krystian

@ChristianDabrowski欢迎您:) –

input[type=checkbox]:checked ~ div { 
    display: none; 
}

将选中每个div元素，该元素前面有一个被选中的input。为什么它可能打破的原因是因为输入不div前面的（就像你在你的问题陈述）

来源

2013-05-22 14:20:01

我相信这不太正确。它会选择每个与选中的输入共享父项的“div”。 – Chris

@克里斯 - 我准备的基础上：http://www.w3.org/TR/selectors/ –

@克里斯 - 'é〜F \t由E开头的F元素element' –

使用元素ID在你的选择：

<input type="checkbox" id="toggle-result" checked="checked"/> 

<div id="myDiv">showme</div> 

<style> 
    #toggle-result:checked ~ #myDiv { 
     display: none; 
    } 
</style>

来源

2013-05-22 14:24:34 paul

带复选框的目标div

回答

相关问题