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上使用它，唯一的区别是data-link属性会相应更改。

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.

Answer 2

你是说，这样吗？

此示例将显示1.5秒的信息，然后消失。

 $('.link').click(function() {
     $('.opis').hide();       
     $('.opis[data-link=' + $(this).data('link') + ']').fadeIn({
         width: '200px'
      }, 300).delay(1500).fadeOut();
});

jsFiddle Demo

或者，你是否更喜欢这样？

此示例将根据点击的链接交换div中的信息。所有链接都使用相同的opis - 类div来显示其信息。

jsFiddle Demo

<强> 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>

<强> jQuery的：

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

$('.link').click(function() {
    $('.opis').hide();
    var dl = $(this).attr('data-link');
    if (dl == 'first'){
        $('.opis').html('<p id="house">You should buy a house</p>');
        $('.opis').fadeIn({width: '200px'}, 300);
    }else if (dl == 'second') {
        $('.opis').html('<p id="hamburger">You should buy a hamburger</p>');
        $('.opis').fadeIn({width: '200px'}, 300);
    }
});

Answer 3

我完全在你的鞋子里...直到我有这个解决方案，我强烈建议你使用here

它应该做你想做的事情，如果你有多个展开/折叠divs它是完美的

添加信息

<强>指令：

标题中的

添加以下内容：

<script type="text/javascript" src="https://raw.github.com/redhotsly/simple-expand/master/src/simple-expand.js"></script>
<script type="text/javascript" src="https://raw.github.com/redhotsly/simple-expand/master/src/simple-expand.min.js"></script>

正文中的

将以下内容插入您想要展开/折叠div

的位置

<a class="expander" href="#">click me</a><div class="content">content to hide.</div>

在插入以下内容之前：

<script type="text/javascript">
$(function () {
        $('.expander').simpleexpand();
        prettyPrint();
});
</script>

可选，将其添加到您的css文件中：

.content {display:none;}

您可以更改外观以满足您的要求..

可扩展的jquery div

3 个答案: