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

时间:2018-02-05 14:02:54

标签: jquery css

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



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

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

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