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

修改版本较少：

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

Answer 2

首先竖起大拇指试图用普通的javascript做到这一点。但请注意，每个浏览器都不支持使用classList之类的内容 - 您的代码将在IE中失败。

对于你的问题：你几乎自己回答了你的问题。强烈建议不要将这些事件属性用作元素。而是把它放入（一个单独的）js（文件）中。这使您的代码清洁和可维护。

所以请写下来：

<a class="services" href="javascript:;">Services</a>

然后在<script>标记或单独的JS文件中添加eventhandler：

var gallery  = document.getElementById('gallery');
var services = document.getElementById('services');
var customer = document.getElementById('customer');

document.querySelector(".services").addEventListener(function(){
    /* Do your stuff here */
    gallery.classList.toggle('hidden');
    /*...and so on...*/
});

我在这里使用querySelector，因为它与jQuery非常相似，因此很多人都熟悉，并且在IE＆gt; = 8中受支持。但随意使用适合您的任何内容（并且需要浏览器支持）。

使用jQuery（你发布的第二个代码片段）使这更容易，并且在所有浏览器中都能正常工作，所以请随意使用它并为你节省一些工作。

是否有更有效的方法来点击多个类而不是这个？

2 个答案:

修改版本较少：

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