如何让这个基本的 jQuery Nav 切换？

Question

我对 jQuery 还是很陌生，所以下面的内容对你们中的许多人来说可能看起来很基础。

我正在开发一个使用 jQuery 的手风琴导航（但我没有使用 jQuery UI）。页面在这里：http://www.rouviere.com/nav/index.html

这里是 HTML：

<div id="subContent">
<ul>
<li><a href="nikon.html">Nikon</a></li>

<li class="cameras"><a href="#" class="drop">Cameras</a>
<ul>
<li><a href="nikon-d3x.html">Nikon D3x</a></li>
<li><a href="nikon-d3s.html">Nikon D3s</a></li>
<li><a href="nikon-d700.html">Nikon D700</a></li>
<li><a href="nikon-d300s.html">Nikon D300s</a></li>      
</ul>
</li>

<li class="lenses"><a href="#" class="drop">Lenses</a>
<ul>
<li><a href="24-70.html">Nikkor 24-70 f2.8</a></li>
<li><a href="80-200.aspx">Nikkor 80-200 f2.8</a></li> 
<li><a href="300.html">Nikkor 300 f2.8</a></li>
<li><a href="50.html">Nikkor 50 f1.4</a></li>
</ul>
</li>

<li class="bags"><a href="#" class="drop">Bags</a>
<ul>
<li><a  href="bag1.html">Small Bag</a></li>
<li><a href="bag2.html">Medium Bag</a></li>
<li><a href="bag3.html">Large Ba</a></li>
</ul>
</li> 
<li><a href="#" class="drop">Memory Cards</a></li>
</ul>
</div>

这里是 jQuery：

<script type="text/javascript">
$(function(){
    $('.interior #subContent > ul > li > a.drop').click(function(){
    $(this).parent().children('ul').toggle("slow");
         return false;
    });

    $(window).ready(function() {
        $('li.cameras ul').hide();
        $('li.lenses ul').hide();
        $('li.bags ul').hide();
    }); 
}); 
</script>

页面显示 ul li ul 全部折叠，但是，当您单击父链接时，它们不会打开。

我希望能得到一两个经验丰富的人来审查这一点并帮助我找出缺少的内容。

谢谢！

Answer 1

试试这个。我为您的主要类别（相机、镜头和包）创建了一个类。然后我告诉按钮在那个 LI 中找到 UL 并切换它。

<div id="subContent">
<ul>
<li><a href="nikon.html">Nikon</a></li>

<li class="main"><a href="#">Cameras</a>
<ul>
<li><a href="nikon-d3x.html">Nikon D3x</a></li>
<li><a href="nikon-d3s.html">Nikon D3s</a></li>
<li><a href="nikon-d700.html">Nikon D700</a></li>
<li><a href="nikon-d300s.html">Nikon D300s</a></li>      
</ul>
</li>

<li class="main"><a href="#">Lenses</a>
<ul>
<li><a href="24-70.html">Nikkor 24-70 f2.8</a></li>
<li><a href="80-200.aspx">Nikkor 80-200 f2.8</a></li> 
<li><a href="300.html">Nikkor 300 f2.8</a></li>
<li><a href="50.html">Nikkor 50 f1.4</a></li>
</ul>
</li>

<li class="main"><a href="#">Bags</a>
<ul>
<li><a href="bag1.html">Small Bag</a></li>
<li><a href="bag2.html">Medium Bag</a></li>
<li><a href="bag3.html">Large Ba</a></li>
</ul>
</li> 
<li><a href="#">Memory Cards</a></li>
</ul>
</div>

下面的jQuery：

<script type="text/javascript">
$(function(){
    $('li.main').click(function(){
    $(this).find('ul').toggle("slow");
         return false;
    });

    $(document).ready(function() {
        $('li.main ul').hide();
    }); 
}); 
</script>

这种方式使用的代码更少，将来更容易扩展。希望对您有所帮助！

Answer 2

更短的写法：

$(function() {
    $('#subContent > ul > li')
        .children('a.drop').click(function() {
            $(this).siblings('ul').toggle("slow");
            return false;
        }).end()
        .children('ul').hide();
}); 

$(window).ready() 毫无意义。我很惊讶它以前做过什么。

一种更有意义和可扩展的编写方式可能是这样的：

$(function() {
    $('#subContent > ul > li').each(function() {
        var toggler = $(this).children('a.drop');
        var sublist = $(this).children('ul');

        toggler.click(function() {
            sublist.toggle("slow");
            return false;
        });
        sublist.hide();
    });
});

Answer 3

我认为您需要将代码更新为

<script type="text/javascript">
$(function(){
    $('#subContent > ul > li > a.drop').click(function(){
    $(this).parent().children('ul').toggle("slow");
         return false;
    });

    $(window).ready(function() {
        $('li.cameras ul').hide();
        $('li.lenses ul').hide();
        $('li.bags ul').hide();
    }); 
}); 
</script>