使用 jquery 切换显示\隐藏但具有多个 id

Question

我有一个 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。

如何修改脚本？

Answer 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');