Question

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

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

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

我已使用下面一个很好的通用解决方案更新了您的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>

Answer 2

如果您可以为切换按钮创建唯一的类，那么您可以执行以下操作：

$('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>

简短而简单：）

Answer 3

你可以试试这个。

$(".toggle-trigger").on("click", function() {

    var trigger = $(this);
    var target = trigger.attr("data-entity");

    if (!trigger.hasClass("active")) {

        $(".toggle-trigger").removeClass("active");
        trigger.addClass("active");
    } else {

        $(".toggle-trigger").removeClass("active");
        trigger.removeClass("active");
    }

    $(".toggle-target[data-entity='"+ target +"']").toggleClass("hide");
});

如何使用

<a class="button toggle-trigger" data-entity="container-one">Container One Link</a>
<a class="button toggle-trigger" data-entity="container-two">Container Two Link</a>

<div class="container toggle-target" data-entity="container-one">Container One</div>
<div class="container toggle-target" data-entity="container-two">Container Two</div>

它的作用是，当您单击toggle-trigger时，它是触发容器的链接。它将获得一个名为data-entity的属性，该属性是查找容器data-entity以切换内容的唯一参数。

jQuery管理很多切换

3 个答案: