jQuery子菜单手风琴
jQuery sub-menu Accordion
我试图用这个手风琴隔离很多东西时遇到了一些困难. 第一,除了"slideToggle"之外,我似乎无法获得任何其他工作,这对我来说似乎很奇怪。 我有一个 ul 和一个子 ul。 我只希望在单击父 ul li 时可以看到子菜单的活动实例。
这是我的 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/
我纠正了你的代码,只需输入:
$(document).ready(function () {
$('.sub-menu li').hide();
$(".ca-menu li").click(function () {
$(this).find(".sub-menu").slideDown();
$(this).siblings("li").find(".sub-menu").slideUp();
});
});
或者,将slideUp
放在slideDown
回调中:
var l;
$('.sub-menu li').hide();
$(".ca-menu li").click(function () {
l = $(this).siblings("li").find(".sub-menu");
$(this).find(".sub-menu").slideDown(function(){
l.slideUp();
});
});
这里有例子:jsfiddle 或 jsfiddle with callback。
相关文章:
- 手风琴菜单打开和关闭
- JQuery手风琴菜单与mmenu冲突-JQuery 1.4 vs 1.7
- 手风琴菜单一直打开直到关闭
- jQuery的嵌套手风琴菜单问题
- 单击手风琴菜单外的链接时折叠jQuery手风琴
- jquery手风琴菜单不正确
- 如何创建一个优雅的手风琴菜单
- 手风琴菜单无法正常工作
- 遍历外部嵌套的 Json 以制作手风琴菜单
- 手风琴菜单 JQuery - 如何打开特定的“id”
- 使用表格构建的 Jquery 手风琴菜单
- 特定的手风琴菜单行为,可能是 jquery ui 或引导程序
- Joomla javascript(JQuery)手风琴菜单总是在单击最后一个子元素时展开所有节点
- jQuery 手风琴菜单扩展了页面长度
- 垂直手风琴菜单溢出问题
- 将引导选项卡栏转换为移动大小的手风琴菜单
- jQuery 手风琴菜单 - 默认情况下隐藏子菜单时遇到问题
- 使用手风琴菜单进行图像演示
- 我做了一个手风琴菜单,但没有子菜单的链接不起作用.
- 如何使用jQuery制作动态手风琴菜单