Question

我的列表结构是这样的：

<ul class="nav-list">
        <li class="nav-list-item first-stage">
          <a href="">
            <table>
                <tr>
                    <td class="first">Stuff</td>
                    <td class="second"><i class="fa fa-chevron-down"></i></td>
                </tr>
            </table>
          </a>
        </li>
    <ul class="inner-nav">
            <li class="nav-list-item second-stage selected">
              <a href="">
                <table>
                    <tr>
                        <td class="inner-first"><div class="icon icon-arrow-right"></div></td>
                        <td class="inner-second">Blaa</td>
                    </tr>
                </table>
               </a>
            </li>

这是我的jQuery：

if $(".first-stage").click(function() {
    var nextItem = $(this).next("li").chidren(".second-stage").find("i");
    if ($(this).next(".inner-nav").is(":hidden")) {
        $(this).slideDown();
        $(nextItem).removeClass(".fa-chevron-down").addClass(".fa-chevron-up");
    } else {
        $(this).slideUp();
        $(nextItem).removeClass(".fa-chevron-up").addClass(".fa-chevron-down");
    }
)};

我无法通过列表遍历工作。这应该是一个下拉列表。不要介意李的“a href”。

Answer 1

首先，您需要修改HTML以使其有效：

<ul class="nav-list">
    <li class="nav-list-item first-stage">
        <table>
            <tr>
                <td class="first">Stuff</td>
                <td class="second"><i class="fa fa-chevron-down"></i></td>
            </tr>
        </table>
        <ul class="inner-nav">
            <li class="nav-list-item second-stage selected">            
                <a href="">
                    <table>
                        <tr>
                            <td class="inner-first"><div class="icon icon-arrow-right"></div></td>
                            <td class="inner-second">Blaa</td>
                        </tr>
                    </table>
                </a>
            </li>
        </ul>
    </li>
</ul>

然后，您可以使用slideToggle和toggleClass：

来简化您的jQuery代码

$(".first-stage").click(function(e) {
    var $nextItem = $('ul', this);
    var $i = $('i', this);
    $nextItem.slideToggle(function() {
        $i.toggleClass('fa-chevron-down fa-chevron-up');
    });
});

Example fiddle

使用jQuery遍历列表

1 个答案: