切换淡化元素，在第二次单击时逐渐淡出

Question

我有这个问题，我想淡化隐藏在我的内容中的元素。

<li class="btn">One
    <div class="hidden">Hidden One</div>
</li>
<li class="btn">Two
    <div class="hidden">Hidden Two</div>
</li>

它可以工作，但是当我第二次点击它时，我希望能够隐藏任何一个隐藏的元素。 请参阅fiddle。 任何帮助将非常感谢！

Answer 1

你可以这样做：

$('.btn').click(function () {
    var hidden = $(this).find('.hidden');
    $('.hidden').not(hidden).fadeOut();
    $(this).find('.hidden').fadeToggle('fast');
});

<强> Updated Fiddle

Answer 2

只需将点击处理程序中的第一行更改为：

即可

$('.hidden').not($(this).find('.hidden')).fadeOut();

jsFiddle example

$('.btn').click(function () {
    $('.hidden').not($(this).find('.hidden')).fadeOut();
    $(this).find('.hidden').fadeToggle('fast');
});