Question

我希望“功能化”更多我的jQuery代码，而不是编写小的独立代码片段。这是一个例子。假设我有一些我想用作触发器的li，就像这样：

<li class="alpha-init" id="a-init">A</li>
<li class="alpha-init" id="b-init">B</li>
<li class="alpha-init" id="c-init">C</li>

还有一些我想要隐藏的东西，并显示在点击这些触发器的对应信息中，如下所示：

<ul id="a-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ul id="b-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


<ul id="c-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

如果我想为每个案例写一个小片段，我可以这样做：

$('li.alpha-init #a-init').click(function(){
    $('ul#a-sub').slideToggle(200);
}

但这意味着要编写与链接和子菜单集一样多的片段。如何将其写入函数？我不打算“吃一天”，所以尽可能多的解释，你会感到很感激。非常感谢！

Answer 1

$('li.alpha-init').click(function(){
    $('ul#'+this.id.substr(1) + "-sub").slideToggle(200);
}

Answer 2

您是否考虑过使用jQuery UI Tabs？听起来几乎就像你想要的那样。您可以使用与默认设置不同的方式设置选项卡的样式！

Answer 3

首先，您的网页上的ID应该是唯一的。您只需使用选择器$('#a-init')即可访问它。

我会这样写（对于每个项目）：

HTML：

<li class="alpha-init" id="a-init">
<div>A</div>
<ul id="a-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</li>

然后将jquery写为：

$('li.alpha-init').click(function(){
    $(this).children('ul.alpha-popdown').slideToggle(200);
}

基本思路是使用$（this）方法访问被点击的项目，并选择相对于父元素的菜单元素。

Answer 4

我使用了Artem Barger和John Sheehan的代码组合。谢谢大家的帮助;现在我睡觉了！

关于功能的另一个jQuery noob问题

4 个答案: