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管理許多切換

回答

相關問題