У меня есть немного сложностей, пытаясь изолировать немало вещей с помощью этого аккордеона. Во-первых, я не могу заставить ничего работать, кроме «slideToggle», что кажется странным для меня. У меня есть одна ul и sub ul. Я хочу, чтобы только активный экземпляр подменю отображался, когда щелкнул родительский ul li.jQuery подменю Accordion
Вот мой CSS
.ca-menu {
padding: 0;
margin-bottom:1px;
width: 300px;
}
ul.ca-menu li {
width: 300px;
overflow: hidden;
display: block;
background: #001e47;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom:0px;
border-left: 10px solid #cfcfcf;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
ul.ca-menu li:last-child {
margin-bottom: 0px;
}
ul.ca-menu li a {
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #cfcfcf;
position:relative;
}
ul.ca-icon {
font-family:'FontAwesome';
font-size: 25px;
text-shadow: 0px 0px 1px #333;
line-height: 40px;
position: absolute;
top:10px;
width: 90px;
left: 0px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content {
position: relative;
left: 70px;
width: 230px;
height: 20x;
top: 5px;
line-height:6px;
}
.ca-main {
font-size: 12px;
font-family: Century Gothic;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
line-height:4px;
}
.ca-sub {
font-size: 16px;
color: #666;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
font-family:myriad pro;
}
ul.ca-menu li:hover {
border-color: #001e47;
background: #cfcfcf;
}
ul.ca-menu li:hover .ca-icon {
color: #001e47;
text-shadow: 0px 0px 1px #001e47;
font-size: 30px;
}
ul.ca-menu li:hover .ca-main {
color: #001e47;
font-size:20px;
}
ul.ca-menu li:hover .ca-sub {
color: #fff;
font-size: 12px;
}
ul.ca-menu ul.sub-menu li {
background:#fff;
width:100%;
position:relative;
left:-50px;
display:block;
}
ul.ca-menu ul.sub-menu {
background:#fff;
width:100%;
}
И JQuery
$(document).ready(function() {
$('.sub-menu li').hide();
$(".ca-menu li").click(function() {
$(this).next(".sub-menu").siblings("li").slideUp();
});
});
А вот JS скрипку ссылка: http://jsfiddle.net/fsew7sh1/
Можете ли вы загрузить внешнюю библиотеку, чтобы заставить аккордеон работать? –