Question

我有一个代码

＆＃13;

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

＆＃13;

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

＆＃13;

当您点击第一个标题时，我应该修改什么来获得结果，第二个标题自动汇总，反之

Answer 1

您需要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 2

＆＃13;

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

＆＃13;

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

＆＃13;

检查以上代码是否有效。

你做错了什么：

您不能包含任何jQuery库。
您在JS控制台中添加了<script>，不应该存在。
您忘记在最后使用jQuery(function($) {关闭});功能。

Answer 3

＆＃13;

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

＆＃13;

a + div {display:none;}

＆＃13;

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

＆＃13;

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/

切换脚本自动汇总

4 个答案: