0
我有一個手風琴菜單和一些樣式表。用javascript或jquery自動添加類到特定的手風琴菜單
我的CSS和menu.php
/* The sidebar navigation */
aside nav li {
position: relative;
}
aside nav > ul > li a, aside nav > ul > li a:visited {
text-decoration: none;
}
aside nav > ul > li a span.icon {
display: inline-block;
margin-right: 10px;
margin-bottom: -4px;
width: 16px;
height: 16px;
line-height: 24px;
}
aside nav > ul > li a span.icon:before {
position: relative;
top: 2px;
}
aside nav > ul > li a:hover span.icon:before {
color: #4b66f1;
}
aside nav > ul > li > a, aside nav > ul > li > a:visited {
display: block;
padding: 0 10px;
line-height: 35px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
background: url('../img/layout/navigation/bg-normal.png') repeat-x #e7eaef;
border-top: 1px solid #bcbcbc;
border-bottom: 1px solid transparent;
}
aside nav > ul > li:last-child > a, aside nav > ul > li:last-child > a:visited {
border-bottom: 1px solid #bcbcbc;
}
aside nav > ul > li > a:hover, aside nav > ul > li.current> a:hover {
background: url('../img/layout/navigation/bg-hover.png') repeat-x #1a66be;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-color: #2e69ae;
border-left: 1px solid #2e69ae;
border-right: 1px solid #2e69ae;
margin-right: -1px;
margin-left: -1px;
}
aside nav > ul > li > a:hover:active, aside nav > ul > li.current> a:hover:active {
background: url('../img/layout/navigation/bg-active.png') repeat-x #1758a4;
box-shadow: none;
}
aside nav > ul > li > a.with_sub.open , aside nav > ul > li > a.with_sub.open:visited {
border-bottom: 1px solid #bcbcbc;
}
aside nav > ul > li.current > a {
background: url('../img/layout/navigation/bg-current.png') repeat-x #f4f4f4;
position: relative;
z-index: 101;
}
aside nav > ul > li.current > a {
position: relative;
}
aside nav > ul > li.current > a:before {
display: block;
position: absolute;
width: 9px;
height: 37px;
bottom: -1px;
right: -9px;
content: ' ';
background: url('../img/layout/navigation/arrow.png');
z-index: 101;
}
aside nav > ul > li.current > a:hover:before {
background: url('../img/layout/navigation/arrow-hover.png');
}
aside nav > ul > li.current > a:hover:active:before {
background: url('../img/layout/navigation/arrow-active.png');
}
aside nav > ul > li.current > a:hover:after {
color: #fdfdfd;
}
aside nav > ul > li img {
margin-right: 10px;
user-select: none;
-moz-user-select: none;
}
/* The subnavigation */
aside nav > ul > li > ul {
display: none;
}
aside nav > ul > li > ul a {
display: block;
padding: 0 10px;
padding-left: 35px;
height: 29px;
line-height: 29px;
}
aside nav > ul > li:last-child > ul li:last-child {
border-bottom: 1px solid #bcbcbc;
}
aside nav > ul > li > ul a:before {
content: '\25B2';
color: #becadb;
text-shadow: none;
margin-right: 5px;
user-select: none;
-moz-user-select: none;
}
aside nav > ul > li > ul > li.with-icon a:before {
display: none;
}
aside nav > ul > li > ul > li.with-icon .icon {
margin-left: -9px;
}
aside nav > ul > li > ul > li a {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
background: #eff3f6;
}
aside nav > ul > li > ul > li a:hover {
background: #d4e2f0;
border-color: #b2c1d2;
}
aside nav > ul > li > ul > li a:hover:active {
background: #c9daec;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.36);
}
aside nav > ul > li > ul > li:first-child a:hover:active {
border-top: 0;
padding-top: 1px;
}
aside nav > ul > li > ul > li:first-child a:hover {
border-top-color: transparent;
}
aside nav > ul > li > ul > li:last-child a:hover {
border-bottom-color: transparent;
}
aside nav > ul > li > ul > li.current a {
background: #e1ebf6;
}
aside nav a.with_sub {
position: relative;
}
aside nav a.with_sub:after {
display: block;
position: absolute;
right: 6px;
top: 0px;
content: '\25BC';
font-size: 10px;
color: #8f8f8f;
}
aside nav a.with_sub:hover:after {
color: #fff;
}
aside nav a.with_sub.open:after {
content: '\25B2';
}<!-- The sidebar -->
<aside>
<div class="top">
<!-- Navigation -->
<nav><ul>
<li><a href="index.php?modul=dashboard&site=home"><img src="img/icons/packs/fugue/16x16/dashboard.png" alt="" height=16 width=16>Dashboard</a></li>
<li class="current">
<a class="open" href="#"><img src="img/icons/packs/fugue/16x16/table.png" alt="" height=16 width=16>Tables</a>
<ul>
<li><a href="index.php?modul=tables&site=table_1"><span class="icon icon-check-empty"></span>Table 1</a></li>
<li class="current"><a href="index.php?modul=tables&site=table_1"><span class="icon icon-table"></span>Table 2</a></li>
<li><a href="index.php?modul=tables&site=table_1"><span class="icon icon-fullscreen"></span>Table 3</a></li>
</ul>
</li>
</ul></nav><!-- End of nav -->
</div><!-- End of .top -->
</aside><!-- End of sidebar -->我的問題是，現在，我怎麼能使其在與JavaScript或jQuery的幫助此菜單中添加類電流和開路自動設置？
當前>打開>當前
我不知道想通了。
請有人可以幫助我嗎？
感謝您的回答，以及我如何添加公開課程？ – Peisi
–
謝謝:)我會試試看tomorow – Peisi