show-hide 相关问题

我有以下设置：部分内容部分内容 <... 我有以下设置： <div class="uncode-post-table"> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> ... </div> <a id="more-actions" onclick="event.preventDefault();" href="javascript:void(0);">Load more actions</a> div.tmb 的列表将随时间延长，目前包含 50 项。在我的 CSS 中，我有以下行： .uncode-post-table .tmb:nth-child(n+11) { display: none; } 所以它只显示前十个 .tmb div。单击链接时我想要做的是在列表中显示接下来的 10 个 .tmb div（因此 .tmb div 1-20 将显示）。再次单击该链接将显示另外 10 个 .tmb div (1-30)。依此类推，直到所有 div 都可见。到目前为止我在 jQuery 中有这个： $("#more-actions").click(function(){ $(".uncode-post-table .tmb").css("display", "block"); }); 单击链接时，将立即显示所有 .tmb div。我试图在这里找到答案：使用 jQuery 显示更多/显示更少，它还显示整个列表而不是接下来的 10 个 div。另外，这个并没有真正回答我的问题：使用 jQuery 实现“显示更多”按钮的最佳方法是什么？要显示接下来的 10 个等等，每次单击后您可以这样做： $("#more-actions").click(function() { $(".uncode-post-table .tmb:visible:last").nextAll("*:lt(10)").css("display", "block"); }); 演示 $("#more-actions").click(function() { $(".uncode-post-table .tmb:visible:last").nextAll("*:lt(10)").css("display", "block"); }); .uncode-post-table .tmb:nth-child(n+11) { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="uncode-post-table"> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> <div class="tmb">some content</div> </div> <a id="more-actions" onclick="event.preventDefault();" href="javascript:void(0);">Load more actions</a>

jquery show-hide

回答 1 投票 0

jquery 显示隐藏不起作用！=

我正在尝试根据选择字段中的值显示和隐藏内容。如果选择字段的值为“美国”，我只想在 Div 1 中显示内容。并且仅在 Div 2 中显示内容，如果...

jquery show-hide

回答 1 投票 0

CloseEvent 不会关闭隐藏的主窗口

我有一个最小化到托盘的 QMainWindow。在托盘中我有两个鼠标右键菜单。显示/隐藏并退出。当窗口可见并且我单击退出菜单时，应用程序将关闭......

qt show-hide qsystemtrayicon

回答 2 投票 0

Vue.js 在点击时显示和隐藏组件

我试图在单击时显示/隐藏一个元素，我尝试了很多方法，但我认为我没有正确设置我的方法。这是我的 Main.js 导入'./assets/main.css' 从 '../src/pages... 导入主页...