Question

我对Javascript很新。我一直试图想出这个，但似乎无法做到。所以我的问题是......

我需要在代码中做些什么，这样当你有一个＆＃39;打开，当您点击两个＆＃39;，下面的内容＆＃39;一个＆＃39;崩溃吗

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>

Answer 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();
 });

喜欢这个吗？

Answer 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);
    }); 
});

Javascript展开/折叠

2 个答案: