0

我想“功能化”更多的 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);
}

但这意味着编写与链接和子菜单集一样多的片段。我怎样才能把它写成一个函数？我不希望“吃一天”，所以尽可能多的解释你觉得写作将不胜感激。非常感谢！

4

4 回答 4

3 
$('li.alpha-init').click(function(){
    $('ul#'+this.id.substr(1) + "-sub").slideToggle(200);
}
于 2009-07-13T05:10:41.687 回答
1

您是否考虑过为此使用jQuery UI 选项卡？这听起来几乎完全符合您的要求。您可以设置与默认选项卡不同的样式！

于 2009-07-13T05:11:07.457 回答
0

首先，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) 方法访问被单击的项目并选择相对于父元素的菜单元素。

于 2009-07-13T05:13:29.467 回答
0

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

于 2009-07-13T06:09:23.660 回答