如何将jQuery隐藏/显示按钮与隐藏/显示的div分开？

Question

I would like to use a clickable div in my header to reveal a div surposedly below my main content area, but I can't figure out how to do that. Right now I'm using a basic jQuery like this:

    jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".expand").click(function()
    {
    jQuery(this).next(".content").slideToggle(500);
    });
});

and a html like this:

<div class="expand">expand</div>
<div class="content">lorem ipsum</div>

but if I separate the two divs, the function breaks.

If you can lead me in the right direction, it will me much appreciated!

Kind regards

Answer 1

but if I separate the two divs, the function breaks.

Because you're using next() which gets the next element next to $(this) . This will work no matter where .content is:

jQuery(document).ready(function () {
    var $content = jQuery(".content"); // Cache
    $content.hide();
    jQuery(".expand").click(function () {
        $content.slideToggle(500);
    });
});

Answer 2

You could use nextAll().first() instead of next() .

jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".expand").click(function() {
        jQuery(this).nextAll(".content").first().slideToggle(500);
    });
});

This way if you have multiple .content on your page, .expand will only expand the next .content on the page.

Answer 3

There's a few things you can do here to improve performance and stability. First off, instead of using the next() method, you would just use

$('.expand').click(function () { $('.content').slideToggle(500); });

Of course, this has the obvious drawback (?) of expanding and contracting all .content areas when you click on any .expand .

But, you can improve your performance and stability if you add a couple of html attributes to the .expand and the .content , like so:

<div class="expand" data-for="content_id">Click to toggle</div>
<div class="content" id="content_id">This is the toggable content</div>

First, this requires a recent version of jQuery (ideally 1.6 or greater) for the data- attributes. I use a data-for to signify that one particular .expand applies to one particular .content . This is similar to using the for attribute on label and form elements.

Second, the .content areas have a new (and unique to each one) id applied. This lets jQuery selectors target those items much quicker through the getElementById() function.

Finally, the new javascript would look like this:

$('.expand').click(function () {
    var id = '#' + $(this).data('for');
    $(id).slideToggle(500); 
});

And if you need accordian functionality (ie, roll up all .content whenever one is clicked, and activate the item that matches the clicked data-for :

$('.expand').click(function () {
    var id = '#' + $(this).data('for');

    $('.content').slideUp(500);
    $(id).slideDown(500); 
});