Question

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

感谢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元素，因为background-color: #f1f1f1;类有一个悬停状态.outer。

Answer 1

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

The id attribute is unique。您不能在同一页面中使用相同id的多个元素;因此，请使用class。
hook 不是有效的HTML属性;虽然这不会伤害你，浏览器很可能会忽略它，我宁愿看到它standardized as data-hook if you so wish。这样您也可以使用标准API。
您应该将.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对div.arrow进行相同的效果，也许可以使用CSS3旋转它。

修改

我不确定为什么你不能使它正常运作;虽然你告诉我你赞赏关于嵌套的评论，你的小提琴没有使用正确的嵌套。

无论如何，我根据我在这里给你的建议为你举了一个例子，基本上我只是复制了代码 verbatim ，就像我在这里写的一样。不过我做了一些调整：例如实现CSS伪元素并摆脱那个看起来很糟糕的{{1}}元素。

显然只是一个例子，但它显示了如何认为应该接近这个问题。希望它能解决你的疑虑：

pseudo-element

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/

在菜单中选择多个li类

4 个答案:

修改