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

【问题标题】：How to close jQuery UI tab using anchor inside it?如何使用其中的锚点关闭 jQuery UI 选项卡？
【发布时间】：2013-12-14 15:47:37
【问题描述】：

我正在使用可折叠的 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。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-tabs

【解决方案1】：

不幸的是，选项卡插件上没有隐藏方法。使用 option 方法，您只需更改插件的设置。您必须像这样在活动选项卡上触发点击事件：

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

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

这里是您更新的fiddle

【讨论】：

或：$(".btn-close").on("click", function () { $(this).closest('.ui-tabs').find('.ui-tabs-active a').click(); });
@A.Wolff 我更喜欢您的解决方案，因为它不依赖于父级。你应该发布它！
没关系，如果您希望将其包含在您的答案中，请编辑您的帖子

【解决方案2】：

试试这个：

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

这里是fiddle

【讨论】：

这不起作用。你试过这个吗？您可能刚刚使用了$(this).parent().hide();，现在已被评论。
是的。对不起我的错误