0

嘿，我有以下困境：我有一组 DIV，其中包含默认隐藏的子 DIVS。最初，我使用 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 -->

//这里是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 功能和古旧的“移动到锚点”都发挥作用？

亲切的问候 G.Campos

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 回答