Question

我刚刚开始使用jQuery，我正在一个移动网站上工作，该网站在同一页面上有多个下拉元素（表单，列表，轮播等）。为了获得多次下降，我使用了Andy Langton的code snippet。

下拉列表工作正常，但它们会在前一个元素的末尾附加下拉链接（加号和减号）。我想做的是让整个元素本身可以点击（在这种情况下是一个标题）。使用此代码段有什么办法吗？可以看到代码here。

任何建议都将不胜感激。谢谢！

Answer 1

这有效！：http://jsfiddle.net/yQme5/27/

您（几乎）只需要更改点击事件并将其置于$('.hdropdown')而不是$('a.toggleLink')上，当您根据元素是显示还是隐藏进行更改来更改链接时，请修改：

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

到

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

Answer 2

以下作品完美

<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代码

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

    });
});

您可以在js fiddle

尝试现场演示

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

2 个答案: