JQueryのtoggle（）を#anchorsと混ぜる

Question

ねえ、そこには次のようなジレンマがあります： 私はデフォルトで隠されているDIVS内に子DIVSのセットを持っています。最初は、アンカーでjavascriptとonclickを使用して、トグルと「アンカーに移動」の両方の効果を達成しました。 JQueryの代替手段に移りましたので、私は同じ「move-to-anchor」効果を再現するのに問題があります。トグルはうまく動作します。

親divの「h2 a」リンクをクリックすると、子divがトグル表示されます。ここでは1つの親のサンプルと子のdivの設定があります：

<div class="full email"> 
<a id="test_anchor"></a> 
    <h2 class="subsubtitle"><a href="#test_anchor">TITLE AND LINK</a></h2> 
    <div class="description full"> 
    <p>THIS IS WHAT SHOWS ALL THE TIME, REGARLDESS OF THE TOGGLE</p> 
    </div><!-- #description ends here --> 

    <div id="c_1"> 
    THE DIV AND THE CONTENTS THAT ARE SHOWN AND HIDDEN 
    </div><!-- #c_1 div ends here --> 

</div><!-- .full .email ends here --> 

//そしてここでjQueryのです：

$(document).ready(function(){ 

$("#c_1,#c_2,#c_3,#c_4").hide(); 

$("div div h2 a").toggle(
    function() { $(this).parent().siblings("div:last").slideDown("slow") }, 
    function() { $(this).parent().siblings("div:last").hide() } 

    ); 

}); 

今の質問は次のとおりです。そのようBOTHにはどうすれば有効またはその#anchorを再活性化しますJquery slideDown/hide関数とgoold古い 'move-to-anchor'が有効になりますか？

種類は、あなたがそれらの内側にいないものを、マッチした要素の可視性をトグルしているトグル機能でやっていること G.Campos

Answer 1

について。

$(function(){ 
    $("#c_1,#c_2,#c_3,#c_4").hide(); // good practice to hide in JS instead of CSS file :) 

    // Assign toggle functionality. 
    $("h2.subsubtitle a").click(function(){ 
    var jDiv = $(this).parent().siblings("div:last"); 

    if(jDiv.is(":visible")){ 
     jDiv.hide("slow"); // you're toggling this div, not the anchor. 
    } else { 
     jDiv.show("slow"); 
    } 

    return true; // if switched to false, anchor won't link to anything. 
    }); 
}); 

Answer 2

あなたがsomething like thisを達成しようとしていた：

はこのような何かを試してみてください？

関連のjQueryコード

$(function(){ 

    $("#c_1").hide(); 

    $("h2.subsubtitle a").toggle(
    function() { $(this).parent().siblings("div:last").slideDown("slow"); return false;}, 
    function() { $(this).parent().siblings("div:last").slideUp("slow"); return false; }      
    ); 

}); 

EDIT：あなたのコメントに応えて

、私はthis exampleに表示/非表示セクションの番号を入れている、すべてが中に私のために正常に動作するように見えますIE6、Firefox 3のコードを編集することができます。/editをURLに追加するとコードを編集できます。この例はあなたのためにうまく動作し、どのブラウザを使用していますか？