切换脚本自动卷起

Question

我有密码

<script>
jQuery(function($) {
      $('#toggle1').click(function() {
        $('.toggle1').slideToggle('slow');
                    return false;
      });
      $('#toggle2').click(function() {
        $('.toggle2').slideToggle('slow');
                    return false;
      });
</script>

<a href="#" id="toggle1">header1</a>
<div class="toggle1" style="display:none">content1</div>
<a href="#" id="toggle2">header2</a>
<div class="toggle2" style="display:none">content2</div>

点击第一个title第二个title自动卷起反之，我应该修改什么得到结果

Answer 1

jQuery(function($) {
      $('#toggle1').click(function() {
        $('.toggle1').slideToggle('slow');
                    return false;
      });
      $('#toggle2').click(function() {
        $('.toggle2').slideToggle('slow');
                    return false;
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="toggle1">header1</a>
<div class="toggle1" style="display:none">content1</div>
<a href="#" id="toggle2">header2</a>
<div class="toggle2" style="display:none">content2</div>

检查上面的代码是否有效。

你哪里做错了：

您不能包含任何 jQuery 库。
您已在 JS 控制台中添加了 <script>，这不应该存在。
您忘记关闭最后带有 }); 的 jQuery(function($) { 函数。

Answer 2

为此你需要 toggle()。

示例：

 $('#toggle > a').click(function () {
     var divs = $(this).siblings('div'),
         div = $(this).nextAll('div:first');
     divs.not(div).hide('500');
     div.toggle('500');
 });

Demo - JSFiddle

Answer 3

<script>
$(document).ready(function(){
    var $togglers = $('.toggler');
      $togglers.click(function(e) {
          e.preventDefault();
        $togglers.next().slideUp(800);
        $(this).next().slideDown(800);
      });
});
</script>

a + div {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="toggler">header1</a>
<div>content1</div>
<a href="#" class="toggler">header2</a>
<div>content2</div>

Answer 4

试试，

HTML:

<a href="#" class="toggle" id="toggle1">header1</a>
<div class="toggle1 toggleElem">content1</div>
<a href="#" class="toggle" id="toggle2">header2</a>
<div class="toggle2 toggleElem" style="display:none">content2</div>

JS:

$('.toggle').click(function () {
  var currnt = $(this).next(".toggleElem").slideToggle("slow");
  $(".toggleElem").not(currnt).slideUp("slow");
});

http://jsfiddle.net/Lj62macr/

切换脚本自动卷起

Toggle script automatically rolled up

jquery

toggle

slidetoggle