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

を、私は以下の素敵な汎用的なソリューションを使用して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' 
 
    }) 
 
    } 
 
});

 
 
\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>

ショートとシンプルな:)

Answer 3

これを試してみてください。それは何

<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").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"); 
}); 

あなたがtoggle-triggerをクリックしたときに、コンテナをトリガするリンクである、です。 data-entityという属性を取得します。この属性は、コンテナのdata-entityが項目を切り替えるためのユニークなパラメータです。