#css
#css
Вопрос:
Я пытаюсь создать кнопку для скрытия и отображения содержимого с помощью дочерних селекторов CSS3, но трюк работает только с минимальной разметкой.
Как только я добавлю несколько div внутри раздела (где размещается содержимое) Дочерние селекторы больше не скрывают содержимое, делая кнопку скрыть / показать бесполезной.
Любая помощь или лучшее понимание того, что происходит, будут очень признательны. Спасибо за помощь.
Вот проблемная разметка:
CSS:
.please > section:first-of-type {
float: right;
width: 62.5%;
}
.please > section:last-of-type {
display: none;
visibility: hidden;
}
.please {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
#read_more[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="read_more"] {
position: absolute;
left: 0;
width: 100px;
text-align: center;
padding: .25rem;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}
[for="read_more"]:hover {
background: rgba(0,0,0,.5);
color: rgb(255,255,255);
}
[for="read_more"] .spanz:last-of-type {
display: none;
visibility: hidden;
}
#read_more[type=checkbox]:checked ~ #nomore {
display: block;
visibility: visible;
width: 100%;
}
#read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:first-of-type {
display: none;
visibility: hidden;
}
#read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:last-of-type {
display: block;
visibility: visible;
}
HTML:
<div class="please">
<div id="filter container">
<input type="checkbox" id="read_more" role="button">
<label for="read_more" onclick=""><span class="spanz">Show Filter</span><span class="spanz">Hide Filter</span></label>
<br /><br />
</div>
<section id="nomore">
<div>
<ul>
<li>Owls hunt mostly small mammals</li>
<li>Owls hunt mostly small mammals</li>
<li>Owls hunt mostly small mammals</li>
</ul>
</div>
<div>
<ul>
<li>Owls hunt mostly small mammals</li>
<li>Owls hunt mostly small mammals</li>
<li>Owls hunt mostly small mammals</li>
</ul>
</div>
<div>
<ul>
<li>Owls hunt mostly small mammals</li>
<li>Owls hunt mostly small mammals</li>
<li>Owls hunt mostly small mammals</li>
</ul>
</div>
</section>
</div>
И вот простая разметка, которая работает, но не совсем то, что мне нужно.
CSS:
.please > section:first-of-type {
float: right;
width: 62.5%;
}
.please > section:last-of-type {
display: none;
visibility: hidden;
}
.please {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
#read_more[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="read_more"] {
position: absolute;
left: 0;
width: 100px;
text-align: center;
padding: .25rem;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}
[for="read_more"]:hover {
background: rgba(0,0,0,.5);
color: rgb(255,255,255);
}
[for="read_more"] .spanz:last-of-type {
display: none;
visibility: hidden;
}
#read_more[type=checkbox]:checked ~ #nomore {
display: block;
visibility: visible;
width: 100%;
}
#read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:first-of-type {
display: none;
visibility: hidden;
}
#read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:last-of-type {
display: block;
visibility: visible;
}
HTML:
<div class="please">
<input type="checkbox" id="read_more" role="button">
<label for="read_more" onclick=""><span class="spanz">Show Filter</span><span class="spanz">Hide Filter</span></label>
<br /><br />
<section id="nomore">
<ul>
<li>Owls hunt mostly small mammals</li>
<li>Owls hunt mostly small mammals</li>
<li>Owls hunt mostly small mammals</li>
</ul>
</section>
</div>
Комментарии:
1. не могли бы вы создать рабочую скрипку, пожалуйста?
2. Это не дополнительные divs в #nomore, которые вызывают problem…it это div контейнера #filter. jsfiddle.net/P78hq/1
3. Контейнер фильтра необходим для добавления стиля границы и возможного цвета фона, чтобы отделить его от раздела. Таким образом, исключение div контейнера фильтра не является вариантом.
4. Я не знаю, как ее установить и сохранить флажок отдельно от раздела, но это ваша проблема:
#read_more[type=checkbox]:checked ~ #nomore { display: block; visibility: visible; width: 100%; }извините, я знаю, что это не очень помогает.
Ответ №1:
вам нужно создать некоторые входные данные и метки для каждого из разделов, чтобы иметь возможность скрывать / показывать части.
Я пишу пример кода для этой цели, вы можете его увидеть
<div>
<article>
<input type="checkbox" id="read_more_1" role="button">
<label for="read_more_1" class ="button" onclick=""><span>Read More</span><span>Hide This Shit!</span></label>
<section>
<p>trim content</p>
</section>
<section>
<p>full content</p>
</section>
</article>
<article>
<input type="checkbox" id="read_more_2" role="button">
<label for="read_more_2" class ="button" onclick=""><span>Read More</span><span>Hide This Shit!</span></label>
<section>
<p>trim content</p>
</section>
<section>
<p>full content</p>
</section>
</article>
<article>
<input type="checkbox" id="read_more_3" role="button">
<label for="read_more_3" class ="button" onclick=""><span>Read More</span><span>Hide This Shit!</span></label>
<section>
<p>trim content</p>
</section>
<section>
<p>full content</p>
</section>
</article>
</div>
и CSS:
article {
margin-bottom: 3rem;
position: relative;
*zoom: 1;
}
article:before, article:after {
content: "";
display: table;
}
article:after { clear: both }
article section:first-of-type {
}
article section:last-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for^="read_more"] {
position: absolute;
bottom: -3rem;
}
[for^="read_more"] span:last-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ section:first-of-type {
display: none;
visibility: hidden;
width: 100%;
}
input[type=checkbox]:checked ~ section:last-of-type {
display: block;
visibility: visible;
width: 100%;
}
input[type=checkbox]:checked ~ [for^="read_more"] span:first-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ [for^="read_more"] span:last-of-type {
display: block;
visibility: visible;
}
вы можете запустить его в (http://jsfiddle.net/shahabal/zrzjd3t1 /) ссылка