jQuery管理许多开关

我用下面一个很好的通用解决方案更新了你的code。

$(".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>

如果您可以为切换按钮创建唯一的类，那么您可以这样做:

$('body').on('click', 'a,button', function(e){
  if ( $(e.target).attr('class') === 'btn-toggle' ) {
    $(this).css({
      color: 'red'
    })
  }
});

    
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <a href="#" class="btn-toggle">aaaa</a>
	<a href="#" class="btn">aaaa</a>
	<a href="#" class="btn">aaaa</a>

简短:)