所有css手风琴div默认打开（没有jquery） [英] All css accordion divs open by default (no jquery)
本文介绍了所有css手风琴div默认打开（没有jquery）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是：
我希望能够同时打开多个手风琴部分，以及在网页加载时。我的意思是，当一个人打开，我不想让另一个人关闭。这可能吗？没有javascript。
And am hoping to have the ability to have multiple accordion sections open at once, and on page load. By this I mean, when one opens, I don't want the other to close. Is this possible? Without javascript as well.
（忽略所有的子手风琴 - 我只需要一个图层）
(Ignore all the sub accordions too- I only need one layer)
<ul class="accordion">
<li id="one" class="files">
<a href="#one">My Files<span>495</span></a>
<ul class="sub-menu">
<li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>
<li><a href="#one"><em>02</em>Skydrive<span>87</span></a></li>
<li><a href="#one"><em>03</em>FTP Server<span>366</span></a></li>
<li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>
<li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>
</ul>
</li>
<li id="two" class="mail">
<a href="#two">Mail<span>26</span></a>
<ul class="sub-menu">
<li><a href="#two"><em>01</em>Hotmail<span>9</span></a></li>
<li><a href="#two"><em>02</em>Yahoo<span>14</span></a></li>
<li><a href="#two"><em>03</em>Gmail<span>3</span></a></li>
</ul>
</li>
<li id="three" class="cloud">
<a href="#three">Cloud<span>58</span></a>
<ul class="sub-menu">
<li><a href="#three"><em>01</em>Connect<span>12</span></a></li>
<li><a href="#three"><em>02</em>Profiles<span>19</span></a></li>
<li><a href="#three"><em>03</em>Options<span>27</span></a></li>
</ul>
</li>
<li id="four" class="sign">
<a href="#four">Sign Out</a>
<ul class="sub-menu">
<li><a href="#four"><em>01</em>Log Out</a></li>
<li><a href="#four"><em>02</em>Delete Account</a></li>
<li><a href="#four"><em>03</em>Freeze Account</a></li>
</ul>
</li>
</ul>
CSS
body {margin:50px;}
/* Reset */
.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion li {
list-style: none;
}
/* Layout & Style */
.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 40px;
height: 32px;
color: #fdfdfd;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion > li:hover > a,
.accordion > li:target > a {
color: #3e5706;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
/*background: url(../img/active.png) repeat-x;*/
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
.accordion li > a span {
display: block;
position: absolute;
top: 7px;
right: 0;
padding: 0 10px;
margin-right: 10px;
font: normal bold 12px/18px Arial, sans-serif;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion > li:hover > a span,
.accordion > li:target > a span {
color: #fdfdfd;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #3e5706;
}
/* Images */
.accordion > li > a:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 24px;
height: 24px;
margin: 4px 8px;
background-repeat: no-repeat;
background-image: url(http://designmodo.com/demo/css3accordionmenu/img/icons.png);
background-position: 0px 0px;
}
.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before { background-position: 0px -24px; }
.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before { background-position: -24px -24px; }
.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before { background-position: -48px -24px; }
.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before { background-position: -72px -24px; }
/* Sub Menu */
.sub-menu li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.sub-menu li:hover a { background: #efefef; }
.sub-menu li:last-child a { border: none; }
.sub-menu li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sub-menu em {
position: absolute;
top: 0;
left: 0;
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif;
}
/* Functionality */
.accordion li > .sub-menu li {
height: 0;
overflow: hidden;
-webkit-transition: height .2s ease-in-out;
-moz-transition: height .2s ease-in-out;
-o-transition: height .2s ease-in-out;
-ms-transition: height .2s ease-in-out;
transition: height .2s ease-in-out;
}
.accordion li:target > .sub-menu li {
height: 33px;
}
我试图避免任何java脚本。
这是可能的吗？
I'm trying to avoid any java script. Is this possible?
推荐答案
没有这是不可能只与CSS，因为你的例子使用CSS3 ：target 选择器。当您单击另一个项目时，目标会更改。
No this is not possible with only css, because your example uses the CSS3 :target selector. When you click on another item the target changes.
不能使用css设置状态，但可以对其进行设置。如果你想保持每个部分打开后点击，你必须使用javascript，但你不需要jQuery
You cannot set state with css but you can style it. If you would like to keep each section open after clicking you would have to use javascript, but you don't need jQuery
如果你想使用javascript，这模仿css尽可能接近，同时允许手风琴保持打开。要关闭手风琴，只需再次点击标题。
If you would like to use javascript, this mimics the css as closely as possible while allowing the accordions to stay open. To close the accordion simply click on the title again.
var lists = document.querySelectorAll('.accordion > li > a'); // get list title links
for (var i = 0; i < lists.length; i++) { // for each list title link
lists[i].href = "javascript:void()"; // stop the page from jumping
lists[i].onclick = function(e) { // when you click the link
var items = e.target.parentNode.querySelectorAll('li'); // get all list items that are siblings of the clicked link
for (var x = 0; x < items.length; x++) { // for each list item
if (items[x].style.height != '33px') { // if its not open
items[x].style.height = '33px'; // open it
} else { // otherwise
items[x].style.height = '0px'; // close it
}
}
};
}
将其包含在脚本标记中，然后将其放在body或者将它包装在 document.onload = function（）{/ * Script Here * /}
Wrap this in a script tag then either drop it in at the bottom of the body, or wrap it in document.onload = function() { /* Script Here */ }
演示）
注意，而使用：target 选择器的任何样式将不再有效，应将其保留在CSS中作为后备广告，以防用户停用JavaScript。
Note while any style with the :target selector will cease to have effect, you should leave them in the css as a fallback in case the user has javascript disabled.
这篇关于所有css手风琴div默认打开（没有jquery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
