jQuery管理许多切换

我需要使用slideToggle()太多的div来显示和隐藏它们。jQuery管理许多切换

这是我的代码，它不能正常工作：

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

来源

2016-11-17 Flex_able

你能否再添加一些HTML和JS呢？ – Samir

这对我很好，试试这个： https://plnkr.co/edit/oc0kdwVuAg26TT4fZaie?p=preview –

Offir Pe'er，它不能正常工作： –

我已经更新您的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>

来源

2016-11-17 08:08:37 Aruna

“帐户”是默认分区“更新帐户”和“更改密码”的作用是“帐户分区 –

@Flex_able您是否要切换此”帐户“分区？您可以检查我的代码并通知您是否需要 – Aruna

“帐户”是默认的div，我把帐户的数据放在帐户中，然后显示帐户然后“更新帐户和更改密码”隐藏，当我显示更新帐户然后帐户并更改pwd隐藏;它在3个DIV之间工作 –

如果你可以创建切换按钮独特的类，那么你可以做这样的事情：

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

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

简短:)

来源

2016-11-17 08:11:29

是的，但没有用。 –

我的例子工作就像一个魅力。只需根据自己的喜好进行定制即可。 – 2016-11-17 09:21:37

你可以试试这个。

$(".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以切换事物的唯一参数。

来源

2016-11-17 08:13:38

jQuery管理许多切换

回答

相关问题