javascript - 可扩展的 jquery div

Question

我在这里尝试了很多示例来在单击链接项时制作可扩展的 div。我的要求是有两个链接项，每个链接项打开一个 div。到目前为止，这是我尝试过的:

HTML:

<div class="holder">
    <ul class="nav">
        <li><a class="link" href="#bla" data-link="first">show onde div content</a>/li>
        <li><a class="link" href="#bla" data-link="second">show another div content</a></li>
  </ul>

<div class="opis" data-link="first">
  tekst 1 
</div>

<div class="opis" data-link="second">
  tekst 2
</div>

javascript/jQuery:

<script type="text/javascript">
$('.opis').hide();

 $('.link').click(function() {
     $('.opis').hide();       
     $('.opis[data-link=' + $(this).data('link') + ']').fadeIn({
         width: '200px'
      }, 300);
});
</script>

CSS:

.opis {display:none;}

这工作正常。
是否有可能让它在同一个链接点击时也收回？也许是为了增加将文本更改为其他内容的效果？我在许多 div 上使用它，唯一的区别是相应更改的数据链接属性。

Answer 1

我已经用 .fadeToggle() 完成了您的要求这对你的情况来说可能有点矫枉过正，但它比使用 .fadeIn() 和 .fadeOut() 更灵活:

$('.opis').hide();

$('.link').click(function() {
    $element = $('.opis[data-link=' + $(this).data('link') + ']');
    if($element.is(":visible")) {
        $element.fadeToggle({
            width: '200px'
        }, 300);
    } else {
        $('.opis').hide();
        $element.fadeToggle({
            width: '200px'
        }, 300);
    }
});

Fiddle.

编辑:更新了一些更简洁的代码:

$('.opis').hide();

$('.link').click(function() {
    $element = $('.opis[data-link=' + $(this).data('link') + ']');
    if(!$element.is(":visible")) {
        $('.opis').hide();
    }
    $element.fadeToggle({
        width: '200px'
    }, 300);
});

Updated fiddle.

编辑 2:

已更新以将文本保存在隐藏的“holder”div 中，当 fadetoggle 发生时，文本变为“Close me!”如果它打开一个 div，或者如果它不再可见则返回原来的。

See this fiddle.