javascript - jQuery 切换列表代码冗余

Question

我正在努力使列表切换代码高效。我计划制作大约 20 个列表并复制粘贴代码并更改类似乎效率很低。我只是想不出让它发挥作用的方法。

这是我目前所拥有的。我希望能够在单击主要元素符号时切换主要元素符号的列表。

$(function() {
  $(".one").click(function() {
    $("ul.legislative.one").toggle('slow');
  });
  $(".two").click(function() {
    $("ul.legislative.two").toggle('slow');
  });
  $(".three").click(function() {
    $("ul.legislative.three").toggle('slow');
  });
  $(".four").click(function() {
    $("ul.legislative.four").toggle('slow');
  });

});

ul.legislative {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="one">This is 1</li>
  <ul class="legislative one">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <li class="two">This is 2</li>
  <ul class="legislative two">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <li class="three">This is 3</li>
  <ul class="legislative three">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <li class="four">This is 4</li>
  <ul class="legislative four">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</ul>

Answer 1

http://jsfiddle.net/jzhang172/tqu7u2pn/1/

$(function() {
  $(".one").click(function() {
    $(this).next('.legislative').toggle('slow');
  });

});

ul.legislative {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="one">This is 1</li>
  <ul class="legislative">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <li class="one">This is 2</li>
  <ul class="legislative">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <li class="one">This is 3</li>
  <ul class="legislative">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <li class="one">This is 4</li>
  <ul class="legislative">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</ul>

我想出了如何用 jQuery 的 next 来做，但我仍然想看看其他人是怎么做的，因为如果我想调用一个不同位置的列表而不是在“next()”槽中怎么办.