时间戳

首页 > 解决方案 > 具有平滑下拉效果的 jQuery UI 选项卡

javascript - 具有平滑下拉效果的 jQuery UI 选项卡

问题描述

如何为下拉 UI 选项卡添加平滑的关闭和打开效果，如下所示：https ://getbootstrap.com/docs/4.0/components/collapse/ ？

我的代码如下：

$("#wsparcie_tabs_container").tabs({
    collapsible: true,
    active: false
});
<div id="wsparcie_tabs_container">
  <ul class="tabs home-wsparcie-tabs">
    <li><a href="#tab_1_contents" class="wsparcie_tab"><span>One</span></a></li>
    <li><a href="#tab_2_contents" class="wsparcie_tab"><span>Two</span></a></li>
    <li><a href="#tab_3_contents" class="wsparcie_tab"><span>Three</span></a></li>
  </ul>
    
<div class="clear"></div>
    
  <div id="tab_1_contents">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="tab_2_contents">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="tab_3_contents">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

标签： javascriptjqueryjquery-ui

解决方案

JQuery 为此提供了一些内置函数，例如 slideDown：

$(selector).slideDown(speed,callback);

在这里，您可以阅读有关 jquery 幻灯片的更多信息。

https://www.w3schools.com/jquery/jquery_slide.asp

编辑：这是一个简单的例子 https://jsfiddle.net/we19rs07/19/

edit2：使用 jquery-gui 选项卡更容易： https ://jsfiddle.net/b4ufmvjg/

推荐阅读