Как закрыть вкладку пользовательского интерфейса jQuery с помощью якоря внутри?

Question

Я использую разборные вкладки пользовательского интерфейса 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> 

Script

$(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

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

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

Здесь ваш обновленный fiddle

Answer 2

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

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

Вот fiddle