gpt4 book ai didi

css - FadeToggle 扩展整个列表

转载 作者:太空宇宙 更新时间:2023-11-04 15:13:05 24 4
gpt4 key购买 nike

当我切换下拉菜单时,整个列表会展开。我一直在想办法只扩展选定的列表,但不知道问题出在哪里。

JSFiddle http://jsfiddle.net/Cx4CK/6/

HTML

<ul>
<li><h1>Applications</h1>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
<li><h1>Forum</h1>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
<li><h1>Guilds</h1>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
<li><h1>Imageboards</h1>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
<li><h1>Projects</h1>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>

CSS

.navigation ul li h1 {
background : #000000;
border-right : 3px solid #ffffff;
color : #ffffff;
display : table;
float : right;
font-size : 28px;
font-weight : 100;
margin : 0;
margin-bottom : 3px;
padding : 6px;
}
.navigation ul li h1:hover {
border-right : 3px solid #f43058;
color : #f43058;
}
/* Positioning */
.navigation {
font-family : 'Open Sans Condensed', sans-serif;
margin : 12px;
position : fixed;
right : 0;
top : 0;
}
.navigation ul {
font-size : 20px;
margin : 0;
padding : 0;
text-align : right;
}
.navigation ul li {
clear : right;
color : #ffffff;
float : right;
list-style-type : none;
}
/* Second Level */
.navigation ul li:hover ul {
display : block;
}
.navigation ul li ul li {
background : #000000;
border-right : 3px solid #ffffff;
color : #ffffff;
display : table;
font-size : 18px;
margin-bottom : 3px;
padding : 6px;
}
.navigation ul li ul li:hover {
border-right : 3px solid #f43058;
color : #f43058;
}

JQuery

jQuery(document).ready(function () {

var subMenu = jQuery("ul li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");

subMenu.hide();

linkClick.click(function (e) {
e.preventDefault();
subMenu.fadeToggle("fast");
});
});

最佳答案

通过替换

subMenu.fadeToggle("fast");

$(this).find('ul li').fadeToggle("fast");

因为你想要被点击元素的子元素。不是每个元素。

更新 fiddle :http://jsfiddle.net/Cx4CK/7/

关于css - FadeToggle 扩展整个列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15205257/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com