0

我有一个嵌套列表作为移动网站的导航工具。最后 li 中的 a.close-link 应该使用 jquery 关闭/隐藏列表 #menu：

<ul id="navi">

<li><a href="#">Mobile Navigation</a>  

<ul id="menu">

    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>

</ul>                       
</li>                               
</ul>

到目前为止，我的工作 jquery 解决方案是：

$(document).ready(function() {
    $("li a.close").click(function() {
        $(this).parent().hide();
        return false;
    });
});

问题：列表保持在“隐藏”状态 - 这意味着嵌套导航列表#menu 不能再次打开。如何添加一行 jquery 以恢复默认状态？

感谢您的帮助！

谢谢您的帮助！您启发了正确的解决方案：

<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

和jQuery代码：

$(document).ready(function() {
    $("li a.close").click(function() {
        $("#menu").children().hide();
        return false;
    });
    $(".openul").mouseover(function() {
        $("#menu").children().show();
    });
});

它对移动浏览器非常有用，因为导航列表在鼠标悬停时保持打开状态。

4

3 回答 3

1 
 <ul id="navi">

<li><a href="#">Mobile Navigation</a>  

<a class="openul" href="#" style="display:none">Open parent list</a>

<ul id="menu">

    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>

</ul>                       
</li>                               
</ul>

创建一个<a>并隐藏它，然后当您单击关闭父列表时，显示该<a>. 那个<a>onclick会重新打开你#menu并隐藏自己

 $(document).ready(function()  {            
        $("li a.close").click(function() {
            $("#menu").hide();
            $(".openul").show();
            return false;
        });   
    $(".openul").click(function(event){
        event.preventDefault();
        $(this).hide();
        $("#menu").show();
    });
});
于 2013-04-09T12:09:23.770 回答
0

谢谢您的帮助。您启发了正确的解决方案：

<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

和jQuery代码：

$(document).ready(function() {
    $("li a.close").click(function() {
        $("#menu").children().hide();
        return false;
    });
    $(".openul").mouseover(function() {
        $("#menu").children().show();
    });
});
于 2013-04-10T08:10:26.577 回答
0

尝试这个：

// Hide the Close li on page load
$("li a.open").parent().hide();

// On click of close, hide the close li and open the show li
$("li a.close").click(function () {
    $(this).parent().hide();
    $(this).parent().next().show();
    return false;
});

// On click of open, hide the show li and open the close li
$("li a.open").click(function () {
   $(this).parent().hide();
    $(this).parent().prev().show();
    return false;
});

在这里演示

于 2013-04-09T12:10:00.223 回答