另一个关于函数的 jQuery 菜鸟问题

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 选项卡 来实现此目的？ 这听起来几乎和你想要的一模一样。 您可以设置与默认选项卡不同的样式！

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 的代码。 感谢大家的帮助； 现在我要睡觉了！