0

こんにちは、私は次のジレンマを抱えています: デフォルトで非表示になっている子 DIVS を含む一連の DIV があります。最初は、トグルと「アンカーへの移動」効果の両方を実現するために、アンカーで 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() }

    );

});

問題は、その #anchor をアクティブ化または再アクティブ化して、Jquery の SlideDown/Hide 関数と古き良き「move-to-anchor」の両方が機能するようにするにはどうすればよいかということです。

敬具 G.カンポス

4

2 に答える 2

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.
  });
});
于 2009-03-16T20:43:03.267 に答える
0

このようなことを達成しようとしていましたか?

関連する 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; }                      
    );

});

編集：

あなたのコメントに応えて、この例にいくつかの表示/非表示セクションを配置しましたが、IE6 と Firefox 3 ですべて正常に動作するように見え/editます。URL に追加することでコードを編集できます。この例は問題なく動作しますか? また、使用しているブラウザーは何ですか?

于 2009-03-16T23:05:48.103 に答える