javascript - 在菜单中选择多个 li 类

Question

我正在创建一个投资组合网站，我正在努力使用 JQuery 选择合适的元素。我的目标是在单击 .outer(类别)元素时显示/隐藏 .inner(任务)元素。我有 .arrow 在菜单展开时旋转。

这是一个 similar question , 以及随附的 jsfiddle .

感谢Tats_innit寻找原始答案。

我有这个 HTML:

<li class="outer" hook="01">
    <div class="arrow"></div>
    Category 1
</li>
<li class="inner" id="menu-01">
    Task 1
</li>
<li class="inner" id="menu-01">
    Task 2
</li>
<li class="inner" id="menu-01">
    Task 3
</li>

<li class="outer" hook="02">
    <div class="arrow"></div>
    Category 2
</li>
<li class="inner" id="menu-02">
    Task 1
</li>
    <li class="inner" id="menu-02">
    Task 2
</li>
    <li class="inner" id="menu-02">
    Task 3
</li>

还有这个jquery:

$(document).ready(function(){
        $('.outer').click(function(){
            var elem = $('#menu-'+$(this).attr('hook')),
                arrow = $(this).children('.arrow')

            if (!elem.is(':visible'))  {
                arrow.rotate({animateTo:90, duration:128});
            } else {
                arrow.rotate({animateTo:0, duration:128});
            }
            elem.slideToggle('128ms', function() {
            });

        return false;
    });
});

我知道我需要更改 var elem = $('#menu-'+$(this).attr('hook')) 但我不确定如何显示 <.inner 的 em>所有 个实例。我没有嵌套 .inner 元素，因为我有一个悬停状态 background-color: #f1f1f1; 用于 .outer 类。

Answer 1

这个问题是可以解决的，但是首先你的方法有很多问题，所以我想改变这些，而不是。然后解决问题。

1. > The id attribute is unique .同一页面中不能有多个具有相同 id 的元素；因此，请使用 class。
2. hook 不是有效的 HTML 属性；虽然这确实不会伤害您并且浏览器很可能会忽略它，但我宁愿看到它 standardized as data-hook if you so wish .这将允许您还使用标准 API。
3. 您应该将 .inner 嵌套在 .outer 中，因为它在语义上有意义并且会优雅地降级并且屏幕阅读器可以理解以及。你提到的悬停背景的问题，我认为可以通过一些好的CSS轻松解决:虽然我不了解具体问题，所以我不能说。

但事实是，使用嵌套，您可能不需要其中的大部分 ID、类和随机数据属性(除非显然您需要它们来做其他事情，而不仅仅是打开一个列表)。

之后你的 HTML 将如下所示:

<ul>
    <li class="outer">
         <div class="arrow"></div>
         Category 1
         <ul>
             <li>
                 Task 1
             </li>
             <li>
                 Task 2
             </li>
             <li>
                 Task 3
             </li>
         </ul>
    </li>
    <li class="outer">
         <div class="arrow"></div>
         Category 1
         <ul>
             <li>
                 Task 1
             </li>
             <li>
                 Task 2
             </li>
             <li>
                 Task 3
             </li>
         </ul>
    </li>
</ul>

而你 jQuery 是这样的:

$('.outer').click(function(){
    var elem  = $(this).children('ul'),
        arrow = $(this).children('.arrow')

    if (!elem.is(':visible'))  {
        arrow.rotate({animateTo:90, duration:128});
    } else {
        arrow.rotate({animateTo:0, duration:128});
    }
    elem.slideToggle('128ms', function() {
    });

    return false;
});

最后一点，.arrow 不是一个非常语义化的元素，因为它甚至不用于激事件画(点击绑定(bind)到 li.outer ) 我会完全删除它，而是使用 pseudo-element 实现相同的效果在上述 li 上，也许用 CSS3 旋转它。

编辑

我不确定你为什么不能让它正常运行；尽管您告诉我您很欣赏有关嵌套的评论，但您的fiddle 没有使用正确的嵌套。

无论如何，我根据我在这里给你的建议为你举了一个例子，基本上我只是逐字复制了我在这里写的代码。不过，我做了一些调整:例如实现 CSS 伪元素并去掉 div.arrow 元素，这确实看起来很糟糕。

显然这只是一个例子，但它表明了应该如何看待这个问题。希望能解决你的疑惑:

Working example