将 JQuery 的toggle() 与#anchors 混合

Question

嘿，我有以下困境： 我有一组 DIV，其中包含默认隐藏的子 DIV。 最初，我使用 javascript 和带有锚点的 onclick 来实现切换和“移动到锚点”效果。 现在我已经转向 JQuery 替代方案，但在重现相同的“移动到锚点”效果时遇到了问题。 切换效果很好。

当您单击父 div 中的“h2 a”链接时，子 div 将通过切换显示。 下面是一个父级和子级 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 -->

//And Here's the 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 slipDown/hide 功能和古老的“move-to-”锚'发挥作用？

亲切的问候 坎波斯

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

您是否想实现类似的事情？

相关 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 中似乎都能正常工作。您可以通过在 URL 上添加 /edit 来编辑它的代码。 这个示例适合您吗？您使用什么浏览器？