jQuery：将类追加到上一个元素并使其可单击

Question

I'm just starting out with jQuery and I'm working on a mobile web site which has multiple drop down elements (forms, lists, carousels etc.) on the same page. For getting multiple drop downs I used Andy Langton's code snippet .

The dropdowns work just fine but they append the drop down links (plus and minus signs) at the end of the previous element. What I'd like to do is make the entire element itself clickable (in this case a header). Is there any way to do so using this snippet? The code can be seen here .

Any advice would be greatly appreciated. Thanks!

Answer 1

This works!: http://jsfiddle.net/yQme5/27/

You (almost) only have to change the click event and put it on $('.hdropdown') instead of $('a.toggleLink') and when you change the link depending on whether the element is shown or hidden to change, modify:

$(this).html( (!is_visible) ? showText : hideText); ;

to

$(this).find('a').html( (!is_visible) ? showText : hideText);

Answer 2

the following works perfect

<a href="javascript://"class="toggleLink" >
    <h3 class="hdropdown">Clickable Header</h3>
</a>
<div class="toggle">
        This is some random text. This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.
</div>

<a href="javascript://"class="toggleLink" >
    <h3 class="hdropdown">Clickable Header 2</h3>
</a>
<div class="toggle">
This is some random text. This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.This is some random text.
</div>

css style

.hdropdown {display:block; font-family:Verdana, sans serif; background:#DEDEDE;border:1px solid #CCCCCC;}

.toggle{
    display:none;
}

jquery code

$(document).ready(function() {

    // capture clicks on the toggle links
    $('a.toggleLink').click(function() {

        $(this).next('div.toggle').slideToggle('slow');

        // return false so any link destination is not followed
        return false;

    });
});

you can try the live demo at js fiddle