与jQuery简单的手风琴？

Question

Here is my jquery

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

How can I change the class hide-me to 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>

I tried the above jquery but i does nothing. I need to rename the class . Where is the mistake?

Answer 1

Try this:

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

If I understand your intents correctly you probably want to toggle the hide and show, then you should be able to do it like this:

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

EDIT: I updated some classes to be the same as in your html. See working fiddle here: http://jsfiddle.net/rrAhX/6/

Answer 2

If there is a reason that you can't use isherwood 's .slideToggle() suggestion (like other things are tied to the classes, or something), then you would use the .toggleClass() : http://api.jquery.com/toggleClass/

For your code specifically, change this:

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

. . . to this:

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

This will toggle both classes, independently of each other, so as long as you start out with only one of the two classes on your element, it will remove that one, and add the other. Click again and the first one will be re-added and the second one removed.