用jquery切换show \ hide但有多个id

时间:2013-09-26 21:46:15

标签: jquery toggle hide show

我有一个php页面,它会在每个UL上面生成多个UL和一个链接,就像这样

<a title="Category one" id="cat-1"> Category one </a>
  <ul id="subcategory-1-ul">
    <li>Subcategory<li/>
    <li>Subcategory</li>
  <ul>

<a title="Category two" id="cat-2"> Category two </a>
  <ul id="subcategory-2-ul">
    <li>Subcategory<li/>
    <li>Subcategory</li>
  <ul>

因为每个主要类别都有很多子类别我想要隐藏UL并且只在我点击锚点时显示它们。

我正在尝试使用这个jquery:

$(document).ready(function() {
         $('#toggle-link').click(function() {
            $('#ul-to-hideshow').toggle('slow');
         });
        })

这可以正常工作,但仅适用于第一个UL和具有相同ID的锚点。我需要以某种方式修改它以传递每个UL或锚的id并打开和关闭每个UL。我为每个锚点及其UL都有唯一的ID。

如何修改脚本?

1 个答案:

答案 0 :(得分:1)

使用.each或使用公共类来隐藏它们;

$('.ULCategory').toggle('slow');

所以你的html可能就是这样;

<a title="Category one" id="cat-1"> Category one </a>
  <ul class="ULCategory" id="subcategory-1-ul">
    <li>Subcategory<li/>
    <li>Subcategory</li>
  <ul>

根据评论进行修改

<a title="Category one" id="cat-1"> Category one </a>
  <ul class="cat-1" id="subcategory-1-ul">
    <li>Subcategory<li/>
    <li>Subcategory</li>
  <ul>

$('.cat-1').toggle('slow');