Javascript 折叠和展开在css中不起作用
我有一个侧栏菜单,有项目主页,画廊,谁是最好的和竞争对手 “画廊”和“谁是最好的,谁工作正常”有一个“折叠”和“展开”下拉列表。在“竞赛”选项卡中有一个下拉列表,列出了本周的热门名单,本周的排行榜还有另外5个项目。我希望当我点击比赛时,这个星期的排行榜会出现,当我点击这个星期的排行榜时,这些项目会出现,而这个排行榜会展开和折叠 HTML:Javascript 折叠和展开在css中不起作用,javascript,html,css,web,Javascript,Html,Css,Web,我有一个侧栏菜单,有项目主页,画廊,谁是最好的和竞争对手 “画廊”和“谁是最好的,谁工作正常”有一个“折叠”和“展开”下拉列表。在“竞赛”选项卡中有一个下拉列表,列出了本周的热门名单,本周的排行榜还有另外5个项目。我希望当我点击比赛时,这个星期的排行榜会出现,当我点击这个星期的排行榜时,这些项目会出现,而这个排行榜会展开和折叠 HTML: jsFiddle here:你可以试试这个css,这可能会有用 #nav { border-radius:3px; -moz-border
jsFiddle here:你可以试试这个css,这可能会有用
#nav {
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#nav, #nav ul, #nav ul ul {
list-style:none;
padding:0;
width:199px;
}
#nav ul, #nav ul ul {
position:relative;
z-index:-1;
}
#nav li {
position:relative;
z-index:100;
}
#nav ul li, #nav ul ul li {
margin-top:-23px;
-moz-transition: 0.4s linear 0.4s;
-ms-transition: 0.4s linear 0.4s;
-o-transition: 0.4s linear 0.4s;
-webkit-transition: 0.4s linear 0.4s;
transition: 0.4s linear 0.4s;
}
#nav li a {
background-color:#d4d5d8;
color:#000;
display:block;
font-size:12px;
font-weight:bold;
line-height:28px;
outline:0;
padding-left:15px;
text-decoration:none;
}
#nav li a.sub {
background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
cursor:pointer;
display:none;
height:28px;
left:0;
position:absolute;
top:0;
width:200px;
}
#nav li a img {
border-width:0px;
height:24px;
line-height:28px;
margin-right:8px;
vertical-align:middle;
width:24px;
}
#nav li a:hover {
background-color:#bcbdc1;
}
#nav ul li a, #nav ul ul li a {
background-color:#eee;
border-bottom:1px solid #ccc;
color:#000;
font-size:11px;
line-height:22px;
}
#nav ul li a:hover {
background-color:#ddd;
color:#444;
}
#nav ul li a img, #nav ul li ul a img {
background: url("images/bulb.png") no-repeat;
border-width:0px;
height:16px;
line-height:22px;
margin-right:5px;
vertical-align:middle;
width:16px;
}
#nav ul li:nth-child(odd) a img, #nav ul ul li:nth-child(odd) a img {
background:url("images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
background:#bcbdc1;
outline:0;
}
#nav a:focus ~ ul li ul li{
margin-top:-23px;
}
#nav a:focus ~ ul li {
margin-top:0;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
}
#nav ul a:focus ~ ul li {
margin-top:0;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
display:block;
}
#nav a.sub:active {
background:#bcbdc1;
outline:0;
}
#nav a:active ~ ul li, #nav ul a:active ~ ul li {
margin-top:0;
}
#nav ul:hover li {
margin-top:0;
}
你可以在这里看到fiddle你的CSS代码在哪里!请注意在发布之前美化HTML和CSS,当没有完成时非常难阅读。此外,您的HTML无效,因为最后一个
和
未关闭。这太多代码了,无法查看。准备一小部分代码来重现问题。这就是你应该去调试的方式。它对我来说很有用(但它是一个非常难看的设计),你注意到竞争对手的菜单了吗。先生,当我们本周点击顶部列表时,下拉列表会显示,但此菜单的顶部列表会隐藏。我们能同时看到这两个吗?我会尽我最大的努力,但现在我有点忙,如果完成了,我会编辑答案,但可能会在22小时后,因为我正在旅行。你想使用javascriptHi吗?我已经创建了新的小提琴。我使用了jquery。我试过了,但没用…我不知道问题出在哪里。
#nav {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#nav, #nav ul {
list-style: none;
padding: 0;
width: 199px;
}
#nav ul {
position: relative;
z-index: -1;
}
#nav li {
position: relative;
z-index: 100;
}
#nav ul li {
margin-top: -23px;
-moz-transition: 0.4s linear 0.4s;
-ms-transition: 0.4s linear 0.4s;
-o-transition: 0.4s linear 0.4s;
-webkit-transition: 0.4s linear 0.4s;
transition: 0.4s linear 0.4s;
}
#nav li a {
background-color: #d4d5d8;
color: #000;
display: block;
font-size: 12px;
font-weight: bold;
line-height: 28px;
outline: 0;
padding-left: 15px;
text-decoration: none;
}
#nav li a.sub {
background: #d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
cursor: pointer;
display: none;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 200px;
}
#nav li a img {
border-width: 0px;
height: 24px;
line-height: 28px;
margin-right: 8px;
vertical-align: middle;
width: 24px;
}
#nav li a:hover {
background-color: #bcbdc1;
}
#nav ul li a {
background-color: #eee;
border-bottom: 1px solid #ccc;
color: #000;
font-size: 11px;
line-height: 22px;
}
#nav ul li a:hover {
background-color: #ddd;
color: #444;
}
#nav ul li a img {
background: url("images/bulb.png") no-repeat;
border-width: 0px;
height: 16px;
line-height: 22px;
margin-right: 5px;
vertical-align: middle;
width: 16px;
}
#nav ul li:nth-child(odd) a img {
background: url("images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
background: #bcbdc1;
outline: 0;
}
#nav a:focus ~ ul li {
margin-top: 0;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
display: block;
}
#nav a.sub:active {
background: #bcbdc1;
outline: 0;
}
#nav a:active ~ ul li {
margin-top: 0;
}
#nav ul:hover li {
margin-top: 0;
}
#nav {
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#nav, #nav ul, #nav ul ul {
list-style:none;
padding:0;
width:199px;
}
#nav ul, #nav ul ul {
position:relative;
z-index:-1;
}
#nav li {
position:relative;
z-index:100;
}
#nav ul li, #nav ul ul li {
margin-top:-23px;
-moz-transition: 0.4s linear 0.4s;
-ms-transition: 0.4s linear 0.4s;
-o-transition: 0.4s linear 0.4s;
-webkit-transition: 0.4s linear 0.4s;
transition: 0.4s linear 0.4s;
}
#nav li a {
background-color:#d4d5d8;
color:#000;
display:block;
font-size:12px;
font-weight:bold;
line-height:28px;
outline:0;
padding-left:15px;
text-decoration:none;
}
#nav li a.sub {
background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
cursor:pointer;
display:none;
height:28px;
left:0;
position:absolute;
top:0;
width:200px;
}
#nav li a img {
border-width:0px;
height:24px;
line-height:28px;
margin-right:8px;
vertical-align:middle;
width:24px;
}
#nav li a:hover {
background-color:#bcbdc1;
}
#nav ul li a, #nav ul ul li a {
background-color:#eee;
border-bottom:1px solid #ccc;
color:#000;
font-size:11px;
line-height:22px;
}
#nav ul li a:hover {
background-color:#ddd;
color:#444;
}
#nav ul li a img, #nav ul li ul a img {
background: url("images/bulb.png") no-repeat;
border-width:0px;
height:16px;
line-height:22px;
margin-right:5px;
vertical-align:middle;
width:16px;
}
#nav ul li:nth-child(odd) a img, #nav ul ul li:nth-child(odd) a img {
background:url("images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
background:#bcbdc1;
outline:0;
}
#nav a:focus ~ ul li ul li{
margin-top:-23px;
}
#nav a:focus ~ ul li {
margin-top:0;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
}
#nav ul a:focus ~ ul li {
margin-top:0;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
display:block;
}
#nav a.sub:active {
background:#bcbdc1;
outline:0;
}
#nav a:active ~ ul li, #nav ul a:active ~ ul li {
margin-top:0;
}
#nav ul:hover li {
margin-top:0;
}