简单的手风琴与jquery

Question

这是我的jquery

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

如何将类隐藏我更改为显示我

<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

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

特别是对于您的代码，请更改以下内容：

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

。对此：

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

这将切换两个类，

彼此独立，所以只要你一开始只使用元素上的两个类中的一个，它就会删除那个类，并添加另一个。 再次单击，第一个将被重新添加，第二个将被删除。

Answer 2

试试这个：

$(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/