javascript - 带有jquery的简单手风琴？

Question

这是我的jQuery

$(document).on('click', '.lists', function() {
    $(this).find('hide-me').attr('hide', 'show');
    console.log('test');
});

如何将课程 hide-me 更改为 show-me

<div class="lists">
    <h5 class="head">header</h5>
    <ul class="list hide">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    </ul>
</div>

我尝试了上面的 jquery，但我什么也没做。我需要rename the class。错误在哪里？

Answer 1

尝试这个：

$(document).on('click', '.lists', function() {
    $(this).find('.hide').addClass('show').removeClass('hide')
});

如果我正确理解您的意图，您可能想要切换隐藏和显示，那么您应该可以这样做：

$(document).on('click', '.lists', function() {
    $(this).parent().find(".lists ul").removeClass("show").addClass("hide");
    $(this).find('.hide, .show').toggleClass('show hide');
});

编辑：我更新了一些类，使其与您的 html 中的相同。在这里查看工作小提琴：http: //jsfiddle.net/rrAhX/6/

Answer 2

如果有理由你不能使用isherwood的.slideToggle()建议（就像其他东西与类有关，或者其他东西），那么你会使用.toggleClass()： http ://api.jquery.com/toggleClass/

具体为您的代码，更改此：

$(this).find('hide-me').attr('hide', 'show');

. . . 对此：

$(this).find('hide-me').toggleClass('hide-me show-me');

这将切换两个类，彼此独立，因此只要您从元素上的两个类中的一个开始，它将删除该类，并添加另一个。再次单击，将重新添加第一个并删除第二个。