0

我正在尝试使用 Jquery 动态扩展相对定位的容器 div，因为 UL 的内部是绝对定位的，并且 FadedIn 和 FadedOut。整个事情需要是动态的，因为每个 UL 都有不同的高度，因为它包含不同数量的 LI。

这是我的 HTML 代码

<div id="container">
<nav id="type-navigation">
<ul id="nav_categories" class="subs">
    <li><a href="#">Category 1</a>
            <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            </ul>
    </li>
    <li><a href="#">Category 2</a>
            <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
            <li><a href="#">Link5</a></li>
            </ul>
    </li>
</ul>
</nav>

这是我的 jQuery

$("#type-navigation #nav_categories > li > a").click(function(event){           
      event.preventDefault();
});

$(".subs > li > a").click(function() {
$(this).parents('.subs').find('ul').hide();
if($(this).next("ul").is(":visible")) {
    $(this).next("ul").fadeOut("slow");
} else {
    $(this).next("ul").fadeIn("slow");
}
return false;
});

这是上述元素的 CSS

#container {
overflow: hidden;
padding: 20px 0 !important;
background: none;}
#type-navigation ul ul{
position: absolute;
top:0;
right: 20px;
}

#type-navigation > ul > li > ul {
 display:none;   
}​
4

0 回答 0