Javascript 展开/折叠答案

【问题标题】：Javascript Expand/CollapseJavascript 展开/折叠
【发布时间】：2012-05-30 10:23:13
【问题描述】：

我对 Javascript 还是很陌生。我一直试图弄清楚这一点，但似乎无法解决。所以我的问题是......

我需要在代码中做些什么，以便当您打开“一”并单击“二”时，“一”下面的内容会折叠？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>Help!</title>

</head>
<body>

<div>
<a href="#" id="1" class="title" name="1">one</a>
</div> 
<div id="workdiv1" class="workdiv" style="display:none">content 1
</div> 
</div> 

<div class="storybottom">
<a href="#" id="2" class="title" name="2">two</a>
</div> 
<div id="workdiv2" class="workdiv" style="display:none">content 2
</div> 
</div> 

<div class="storybottom">
<a href="#" id="3" class="title" name="3">three</a>
</div> 
<div id="workdiv3" class="workdiv" style="display:none">content 3
</div> 
</div> 

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
    $(document).ready(function() { 
        $('#work').hide(); 

        $('a.title').click(function() { 
            var id = $(this).attr('id'); 
            $('#workdiv' + id).toggle(150); 
            return false; 
        }); 
    }); 
</script>
</body>
</html>

【问题讨论】：

为您服务：jsfiddle.net/jbabey/kSQfy
另外，查看 jquery ui，您可以使用手风琴。

标签： javascript jquery html expand collapse

【解决方案1】：

 $('a.title').click(function(){
      var target = $(this).closest('div').next('div');
      var mode = target.is(':visible');
      target.siblings('div.workdiv').hide();
      if(!mode) target.show(); else target.hide();
 });

像这样？

【讨论】：

Hmm that doesn't seem to close the ones that were previous open.My goal is to have this system where the content expands and collapses with animation and also when something different is selected the previous content collapses.像手风琴一样！
@user1413528 已更新。您可以在hide()/show() 函数中添加动画设置。
您好，grigore，首先非常感谢！我也在底部写过，但是是否可以嵌入代码，以便当您单击相同的“标题”时，它会关闭？例如当“一个”打开并再次单击它时，它会折叠..？
非常感谢！奇迹般有效。我注意到我可以将 target.siblings('div.workdiv').hide(); 替换为 $('div.workdiv').hide(); 为好吧。祝你有美好的一天！

【解决方案2】：

http://jsfiddle.net/jbabey/kSQfy/1/

$(document).ready(function() {
    $('a.title').click(function() {
        var correspondingDiv = $(this).parent().next('div');

        if (!correspondingDiv.is(':hidden')) {
            return;
        }

        // hide other divs
        $('.workdiv').hide(150);

        // show this one
        correspondingDiv.toggle(150);
    }); 
});

【讨论】：

嗨，jbabey，这看起来很接近，但是否可以嵌入代码，以便当您单击相同的“标题”时，它会关闭？例如当“一个”打开并再次单击它时，它会折叠..？
@davidgogh 您需要做的一切都已经存在，我们不是来为您完成工作的；)