javascript-是否有比这更有效的方法来切换多个类？

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

这是干什么的：

当您单击“服务”,“图库”或“客户”时,它会在下面的div中删除“隐藏”类,并将“隐藏”类添加到同一div中的所有其他列表.

可以在此处看到发生情况的实时演示：http://www.cyberbytesdesign.com/WIP2(这是主标题导航).

这是我正在使用的代码(绝对不是一种有效的方法,因为它少于所有代码的一半,但是很重要).

<nav>
  <ul class="menu-option-set">
    <li>
      <a href="javascript:;" onm ouseup="
        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:;" onm ouseup="
         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:;" onm ouseup="
         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');
    }
});

有任何想法吗？

解决方法:

较少的修改版本：

将数据属性添加到主菜单,并将其值设置为子菜单的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>

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

$(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/