3

使用 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');
    }
});

有任何想法吗？

4

2 回答 2

2

少修改版：

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

于 2012-07-24T10:32:10.600 回答
1

首先为尝试使用纯 javascript 做到这一点竖起大拇指。但是请注意，classList并非每个浏览器都支持使用类似的东西 - 您的代码在 IE 中将失败。

对你的问题：你几乎自己回答了你的问题。强烈建议不要在元素中使用这些事件属性。而是将其放入（分离的）js（文件）中。这使您的代码干净且可维护。

所以改为这样写：

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

然后在您的标签或单独的 JS 文件中添加一个事件处理程序：<script>

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> = 8中支持。但是请随意使用适合您的任何东西（并且是浏览器支持所需要的）。

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

于 2012-07-24T10:08:08.070 回答