Question

我使用的是可折叠的jQuery UI标签。我的代码如下：

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1 Contents</p>
      <a href="#" class="btn-close">Close</a>
  </div>
  <div id="tabs-2">
     <p>Tab 2 Contents</p>
    <a href="#" class="btn-close">Close</a>
  </div>
  <div id="tabs-3">
     <p>Tab 3 Contents</p>
    <a href="#" class="btn-close">Close</a>
  </div>
</div>

脚本

$(function() {
  $( "#tabs" ).tabs({ hide: { effect: "slideUp", duration: 350 },
    show: { effect: "slideDown", duration: 350 },
    collapsible: true,
    active: false,
  });
  $(".btn-close").on( "click", function() {
    $( "#tabs" ).tabs( "option", "hide", { effect: "slideUp", duration: 350 } );
  });
});

我需要通过单击“关闭”锚点来折叠打开的选项卡，但无法弄清楚如何执行此操作。谁能说出我做错了什么？ See above code on JSFiddle。

Answer 1

不幸的是，标签插件上没有隐藏方法。使用选项方法，您只需更改插件的设置。您必须在活动选项卡上触发click事件，如下所示：

$(".btn-close").on( "click", function() {
    $("#tabs").find('li.ui-state-active a').trigger('click');
});

（这个答案使用A.Wolff建议的改进来删除对父元素的依赖。）

此处更新了fiddle

Answer 2

试试这个：

$(".btn-close").click(function() {
    $( "#tabs" ).tabs( "option", "toggle", { effect: "slideUp", duration: 350 } );
    $(this).parent().hide();
});

这是fiddle

如何在其中使用锚点关闭jQuery UI选项卡？

2 个答案: