代码之家  ›  专栏  ›  技术社区  ›  Roberto C

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

  •  0
  • Roberto C  · 技术社区  · 12 年前

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

    因为每个主类别中都有许多子类别,所以我想隐藏URL,只在单击锚点时显示它们。

    我正在尝试使用这个jquery:

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

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

    如何修改脚本?

    1 回复  |  直到 12 年前
        1
  •  1
  •   griegs    12 年前

    使用.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');