Question

我正试图用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;   
}

使用jquery动态扩展具有绝对定位内容的相对定位容器

0 个答案: