点击按钮后,我尝试显示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;
答案 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