关于函数的另一个jQuery的noob问题

Question

我想“功能化”更多的我的jQuery代码，而不是写一点独立片段。下面是一个例子。比方说，我有一些李时珍，我想作为触发器来使用，就像这样：

<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);
}

在基本的想法是使用$（这）方法来访问被点击的项目，并选择你的菜单元素相对于父元素。

Answer 4

我用阿尔乔姆Barger的和John Sheehan的代码的组合。谢谢大家对你的帮助;现在我得到睡觉！