javascript - 有没有比这更有效的方法来点击切换多个类？

Question

使用 JS 实现此切换类的更好方法是什么？

它所做的就是这样:

当您单击“服务”、“画廊”或“客户”时，它会删除下面 div 中的“隐藏”类，并将“隐藏”类添加到同一 div 中的所有其他列表。

可以在这里看到正在发生的事情的现场演示:http://www.cyberbytesdesign.com/WIP2 (这是主要的标题导航)。

这是我正在使用的代码(绝对不是一种有效的方法，因为这还不到所有代码的一半，但明白了要点)。

<nav>
  <ul class="menu-option-set">
    <li>
      <a href="javascript:;" onmouseup="
        document.getElementById('services').classList.toggle('hidden');
        document.getElementById('gallery').classList.add('hidden');
        document.getElementById('customer').classList.add('hidden');
        ">Services</a>
    </li>
    <li>
       <a href="javascript:;" onmouseup="
         document.getElementById('gallery').classList.toggle('hidden');
         document.getElementById('services').classList.add('hidden');
         document.getElementById('customer').classList.add('hidden'); ">Gallery</a>
    </li>
    <li>
       <a href="javascript:;" onmouseup="
         document.getElementById('gallery').classList.toggle('hidden');
         document.getElementById('services').classList.add('hidden');
         document.getElementById('customer').classList.add('hidden'); ">Customer</a>
    </li>
  </ul>
</nav>
<div id="header-subnav">
  <nav>
    <ul id="services" class="hidden">
      <li <?php echo $bathroom ?>><a href="bathroom">Bathroom</a></li>
      <li <?php echo $kitchen ?>><a href="index.php">Kitchen</a></li>
      <li <?php echo $accessibility ?>><a href="index.php">Accessibility</a></li>
    </ul>
    <ul id="gallery" class="hidden">
      <li <?php echo $photo ?>><a href="gallery.php">Photo Gallery</a></li>
      <li <?php echo $project ?>><a href="project.php">Project Gallery</a></li>
    </ul>
    <ul id="customer" class="hidden">
      <li <?php echo $coupons ?>><a href="coupons.php">Coupons</a></li>
      <li <?php echo $testimonials ?>><a href="testimonials.php">Testimonials</a></li>
    </ul>
  <nav>
</div>

我假设你必须做一些类似于以某种方式使用它的事情，但修改:

$('.menu-option-set a').click(function()
{
    // if clicked item is selected then deselect it
    if ($('#header-subnav').hasClass('hidden'))
    {
        $('#header-subnav').removeClass('hidden');
    }

    // otherwise deselect all and select just this one
    else
    {
        $('.menu-option-set a').removeClass('hidden');
        $('#header-subnav').addClass('hidden');
    }
});

有什么想法吗？

Answer 1

少修改版本:

将data属性添加到主菜单并将其值设置为子菜单的id。

<nav>
  <ul class="menu-option-set">
    <li>
      <a href="#" data-subid="services">Services</a>
    </li>
    <li>
       <a href="#" data-subid="gallery">Gallery</a>
    </li>
    <li>
       <a href="#" data-subid="customer">Customer</a>
    </li>
  </ul>
</nav>

然后将事件处理程序附加到主菜单。它隐藏所有子菜单，并显示适当的子菜单。 (此外，您不需要“隐藏”类(class)。)

$(function() {
    $("#header-subnav ul").hide();
    $('.menu-option-set a').on('click', function() {
        var $s = $("#" + $(this).attr('data-subid'));                
        if($s.is(':hidden')) {
            $("#header-subnav ul").hide();
            $s.show();
        } else {
            $s.hide();
        }
    });
});

就这样!这是示例:http://jsfiddle.net/dT225/1/

...但我个人建议这种风格:

在每个主菜单旁边放置子菜单。

<nav id="menu">
  <ul>
    <li>
      <a href="#">Services</a>
      <ul>
        <li <?php echo $bathroom ?>><a href="bathroom">Bathroom</a></li>
        <li <?php echo $kitchen ?>><a href="index.php">Kitchen</a></li>
        <li <?php echo $accessibility ?>><a href="index.php">Accessibility</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Gallery</a>
      <ul>
        <li <?php echo $photo ?>><a href="gallery.php">Photo Gallery</a></li>
        <li <?php echo $project ?>><a href="project.php">Project Gallery</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Customer</a>
      <ul>
        <li <?php echo $coupons ?>><a href="coupons.php">Coupons</a></li>
        <li <?php echo $testimonials ?>><a href="testimonials.php">Testimonials</a></li>
      </ul>
    </li>
  </ul>
</nav>​​​​​​​​​​​​​

单击主菜单时，事件处理程序将仅显示源元素的下一个元素。

$(function() {
    $('#menu li ul').hide();
    $('#menu a').on('click', function() {
        var $s = $(this).next();           
        if($s.is(':hidden')) {
            $('#menu li ul').hide();
            $s.show();
        } else {
            $s.hide();
        }
    });
});

我认为它更简单、可维护和语义化。 http://jsfiddle.net/dKtVK/1/