使用jquery切换show \ hide但具有多个id [英] Toggle show\hide with jquery but with multiple ids

问题描述

我有一个php页面，它会生成多个UL，并且每个UL上方都有一个链接，像这样

I have a php page wich generates multiple ULs and a link above each UL, like this

<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，仅在单击锚点时才显示它们.

Because there are many subcategories into each main categories I want to hide the ULs and only show them when I click the anchor.

我正在尝试使用此jquery:

I'm trying to use this jquery:

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

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

This works ok but only for the first UL and an anchor with the same id. I need to modify it somehow to pass the id of each UL or anchor and toggle each UL on and off. I have unique ID for each anchor and its UL.

如何修改脚本?

推荐答案

使用.each或使用通用类将其隐藏；

Use .each or use a common class to hide them;

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

因此您的html可能就是这样；

So your html might then be;

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

这篇关于使用jquery切换show \ hide但具有多个id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！