在菜单中选择多个 li 类

Question

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

这是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 的所有 个实例。 我没有嵌套.inner 元素，因为.outer 类有一个悬停状态background-color: #f1f1f1;。

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 不是一个非常语义化的元素，因为它甚至没有用于激活动画（点击绑定到 li.outer）我会完全删除它，而是使用在上述li 上添加一个pseudo-element，也许可以用CSS3 旋转它。

编辑

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

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

显然只是一个例子，但它显示了应该如何处理这个问题。希望它能解决你的疑惑：

Working example

Answer 2

您可以将一组outer 和inner 嵌套到div 中

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

那么你的 js 代码就像

$('.outer').click(function(){
    var elem = $(this).siblings('.inner'),
        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;
});

同时不会影响background-color 的outer 课程

Answer 3

<script>
$(document).ready(function(){
    $('li.inner').hide();
    $('.outer').click(function()
    {
        var elem = $(this).attr('hook');
        $('li.inner').hide();
        $(".menu-"+elem).toggle();
    });
});
</script>
<ul>
<li class="outer" hook="01">
<div class="arrow"></div>
Category 1
</li>
<li class="inner menu-01">
Task 1
</li>
<li class="inner menu-01">
Task 2
</li>
<li class="inner menu-01">
Task 3
</li>

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

首先将 li id 更改为 class，因为 2 li 没有相同的 id

Answer 4

我猜你在找nextUntil()

$(this).nextUntil('.outer').slideToggle('218ms');

http://jsfiddle.net/bf7Ke/53/