Question

所以，我只是通过遵循jQuery codex来创建一个子菜单，而且我卡住了。但其他一切都很完美。

我有类似以下的HTML结构：

<li><a href="#">smth</a>
    <ul>
        <li><a href="#">smth sub</a></li>
    </ul>
</li>
<li><a href="#">smth</a>
    <ul>
        <li><a href="#">smth sub 2</a></li>
    </ul>
</li>

让我们说第一个SMTH打开了。现在，当我点击第二个SMTH时，它将显示在另一个SMTH的顶部。

我的jQuery代码如下。

$(document).ready(function() {
    /*
    * header navigation
    */

    // hide sub UL's
    $('ul.sub').hide();

    $('#header .left li.m:first a, #header .right li.m:first a').css('borderLeft', 'none');
    $('#header .left li.m:last a, #header .right li.m:last a').css('borderRight', 'none');

    // Add class closed, because it's nessesery.
    $('#header .left li ul').addClass('closed');

    // If LI element is clicked, open or close sub UL?
    $('#header .left li').click(function(event)
    {
        // If sub UL is closed, we need to open it.
        if( $(this).find('ul').hasClass('closed') )
        {
            $(this).find('ul').removeClass('closed');
            $(this).find('ul').addClass('opened');
            $(this).find('ul').fadeIn('100');
        }
        // If sub UL is opened, we need to close it.
        else
        {
            $(this).find('ul').removeClass('opened');
            $(this).find('ul').addClass('closed');
            $(this).find('ul').fadeOut('100');
        }
    });
});

Answer 1

您的点击功能似乎正在显示并隐藏您正确点击的元素，但它并未隐藏可能已打开的所有其他ul。考虑使第一行像：

$(".subNav").switchClass( "open", "closed", 100 );

这也带来了一个好点。 JQuery有一个switchClass（）函数，几乎与你的3行删除相同 - ＆gt;添加 - ＆gt;褪色。保存一些代码行的好方法。

编辑：我还应该注意，我在这里写的js行要求你为所有用于子导航的ul添加一个类。还有其他方法可以做到这一点，但为了便于解释，这似乎最合适。

Answer 2

我不完全确定我的图像是正确的，因为我不知道你的菜单样式，所以我认为它是一个垂直的SMTH列表，其子列表显示在右边。

在添加“已打开”类之前，当您单击SMTH时，您要做的是关闭所有打开的子列表（通常只有一个子列表）。

这是我修改代码的方式：

    // ...

    // if LI element is clicked, open or close sub UL?
    $('#header .left li').click(function(event)
    {
      // if sub UL is closed, we need to open it
      if( $(this).find('ul').hasClass('closed') )
      {
        // close all opened sublists
        $('ul.opened')
          .removeClass('opened')
          .addClass('closed')
          .fadeOut('100');

        // ...

另外，Ben Roux的switchClass建议很棒，你应该考虑一下。

如果一个UL已经打开，隐藏另一个，怎么样？

2 个答案: