jQuery hide/showボタンを非表示のdivから分離する方法は？

Question

メインのコンテンツエリアの下にdivを表示するために、私のヘッダーにクリック可能なdivを使用したいと思いますが、その方法を理解できません。

jQuery(document).ready(function() { 
    jQuery(".content").hide(); 
    jQuery(".expand").click(function() 
    { 
    jQuery(this).next(".content").slideToggle(500); 
    }); 
}); 

と、このようなHTML：：今のところ私はこのような基本的なjQueryのを使用してい

<div class="expand">expand</div> 
<div class="content">lorem ipsum</div> 

が、私は2つのdiv要素、機能ブレークを分離した場合。

あなたが正しい方向に私を導くことができれば、私は非常に感謝します！

種類は

Answer 1

についてしかし、私は2つのdiv要素、機能ブレークを分離した場合。

あなたは$(this)の隣に次の要素を取得しますnext()を使用しているので。

jQuery(document).ready(function() { 
    var $content = jQuery(".content"); // Cache 
    $content.hide(); 
    jQuery(".expand").click(function() { 
     $content.slideToggle(500); 
    }); 
}); 

Answer 2

あなたはnextAll().first()代わりのnext()を使用することもできます。これは.contentは関係なく動作します。

jQuery(document).ready(function() { 
    jQuery(".content").hide(); 
    jQuery(".expand").click(function() { 
     jQuery(this).nextAll(".content").first().slideToggle(500); 
    }); 
}); 

あなたのページに複数の.contentを持っている場合は、この方法で、.expandは、ページ上の.content次を拡大していきます。

Answer 3

ここでは、パフォーマンスと安定性を改善するためにできることがいくつかあります。まず第一に、代わりにnext()方法を使用しての、あなただけもちろん

$('.expand').click(function() { $('.content').slideToggle(500); }); 

を使用することになり、これは明らかな欠点（？）あなたはどの.expandをクリックすると、すべての.contentエリアを拡大し、を収縮のを持っています。

しかし、あなたがHTMLのカップルを追加した場合、あなたのパフォーマンスと安定性を向上させることができますが、そうのように、.expandと.contentに属性：

<div class="expand" data-for="content_id">Click to toggle</div> 
<div class="content" id="content_id">This is the toggable content</div> 

まず、これは（jQueryの最近のバージョンを必要とし、理想的に1.6またはそれ以上）を指定します。私はdata-forを使用して、特定の1つである.expandが1つの特定のものに適用されることを示します。.contentこれはlabelとフォーム要素のfor属性を使用するのと同じです。

第2に、.content領域には新しい（およびそれぞれに固有の）idが適用されます。これにより、jQueryセレクタはgetElementById()関数を使用してこれらの項目をより迅速に対象にします。

最後に、新しいジャバスクリプトは次のようになります。

$('.expand').click(function() { 
    var id = '#' + $(this).data('for'); 
    $(id).slideToggle(500); 
}); 

そして、あなたはアコーディオン機能が必要な場合（すなわち、1つがクリックされるたびに、すべての.contentをロールアップして、クリックされたdata-forに一致する項目をアクティブにします

$('.expand').click(function() { 
    var id = '#' + $(this).data('for'); 

    $('.content').slideUp(500); 
    $(id).slideDown(500); 
});