Как закрыть вкладку jQuery UI, используя привязку внутри нее?

0

Я использую разборчивые вкладки пользовательского интерфейса jQuery. Мой код выглядит так:

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 } );
  });
});

Мне нужно свернуть открытую вкладку, нажав "закрыть" якорь, но не могу понять, как это сделать. Может ли кто-нибудь сказать, что я делаю неправильно? См. Выше код JSFiddle.

Теги:
jquery-ui-tabs

2 ответа

1
Лучший ответ

К сожалению, в плагине вкладок нет метода скрыть. С помощью метода опций вы изменяете настройку плагина. Вы должны активировать событие click на активной вкладке следующим образом:

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

(В этом ответе используются улучшения, предложенные A.Wolff для удаления зависимости от родительского элемента.)

Здесь ваша обновленная скрипка

Поделиться
  • 1
    или: $(".btn-close").on("click", function () { $(this).closest('.ui-tabs').find('.ui-tabs-active a').click(); });
  • 0
    @ A.Wolff Мне нравится ваше решение еще лучше, потому что оно не зависит от родителей. Вы должны опубликовать это!
Показать ещё 1 комментарий
0

Попробуй это:

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

Здесь скрипка

Поделиться
  • 0
    Это не работает. Вы пробовали это? Вы, вероятно, просто использовали $(this).parent().hide(); который сейчас прокомментирован.
  • 0
    Да, это. Извините моя ошибка

Ещё вопросы

Сообщество Overcoder
Наверх
Меню