javascript - jQuery 管理许多切换

Question

我需要对太多的 div 使用 slideToggle() 来显示和隐藏它们。

这是我的代码，它无法正常工作:

$(".account-update").hide();
$(".account-update-pwd").hide();

$(".slide-toggle").click(function() {
    $(".account-update").slideToggle();
    $(".account").slideToggle();
});
$(".slide-toggle-pwd").click(function() {
    $(".account-update-pwd").slideToggle();
    $(".account-update").slideToggle();
});

HTML:

<a href="#" class="slide-toggle">Update Account</a>
<a href="#" class="slide-toggle-pwd">Change Password</a>

Answer 1

我已经用下面一个很好的通用解决方案更新了您的代码。

$(".account-update").hide();
$(".account-update-pwd").hide();

$("a.slide-toggle").click(function() {
  var targetDiv = $($(this).attr('data-selector'));
  var otherDivs = $("div.slide-toggle").not(targetDiv);
  
  otherDivs.each(function(){
    if($(this).is(':visible')) {
      $(this).slideToggle();
    }
  });
  
  targetDiv.slideToggle(function(){
    if($("div.slide-toggle:visible").length === 0) {
      $(targetDiv.attr('data-default')).slideToggle();
    }
  });
});

div {
  height: 100px;
}

.account {
  background-color: red;
  color: white;
}

.account-update {
  background-color: green;
  color: white;
}

.account-update-pwd {
  background-color: blue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-toggle account">Account Div</div>
<p><a href="#" class="slide-toggle" data-selector=".account-update">Update Account</a></p>
<div class="slide-toggle account-update" data-default=".account">Account Update Div</div>
<p><a href="#" class="slide-toggle" data-selector=".account-update-pwd">Change Password</a></p>
<div class="slide-toggle account-update-pwd" data-default=".account">Account Password Update Div</div>