一旦我点击一个按钮，如何一次显示一个li

Question

点击按钮后，我尝试显示li，然后如果再次点击它，则会显示以下li。我的jQuery代码不起作用。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.moments').on('click', 'button', function() {
    $(this).closest('.moments').find('.uniques').slideDown();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="moments">
  <button>Click Here</button>
  <ul class="uniques" type="circle">
    <li>1</li><br>
    <li>2</li><br>
    <li>3</li><br>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你必须在li的最大高度附近玩。

我在这里设置了课程active，它会显示我们想要的li。

每次用户点击按钮时，我都会在没有课程li的情况下显示下一个active。

PS：另外，摆脱那些肮脏的<br>。他们很可怕。

$(document).ready(function() {
  $('.moments').on('click', 'button', function() {
    $(this).closest('.moments').find('.uniques li:not(.active)').eq(0).addClass('active');
  });
});

.uniques li{
  overflow: hidden;
  max-height: 0;
  transition: all .5s;
}

.uniques li.active{
  max-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="moments">
  <button>Click Here</button>
  <ul class="uniques" type="circle">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

Answer 2

jQuery中有一个<!-- This will also block html parsing --> <script src="/this/will/run/first.js"></script> <!-- Run after the HTML is parsed --> <script src="/this/will/run/second.js" defer></script> <script src="/this/will/run/third.js" defer></script> <script src="/this/will/run/fourth.js" defer></script> 选择器。你拿最后一个可见的，然后转到下一个将它滑下来。

:visible