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/

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>

{{1}}

我想出了如何使用jQuery下一步做到这一点，但我仍然希望看到其他人如何做到这一点，因为如果我想调用一个不同位置的列表而不是在“next（）”槽中

Answer 2

您可以尝试使用此方法进行一些css类更改，并对ul li使用正确的语义来获取有效的html。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="main-menu">
  <li class="menu">This is 1</li>
  <li class="legislative">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
  </li>
  <li class="menu">This is 2</li>
  <li class="legislative">
   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
  </li>
  <li class="menu">This is 3</li>
  <li class="legislative">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
  </li>
  <li class="menu">This is 4</li>
  <li class="legislative">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
  </li>
</ul>

<script type="text/javascript">
 $(function(){
  $("ul.main-menu li").click(function(){
     $(this).next().toggle('slow');
  });    
 });
 </script>

 <style type="text/css">
 .legislative {
   display:none; 
   list-style: none; 
   margin-top:-15px; 
  }
 </style>

jQuery切换列表代码冗余

2 个答案: