Question

嘿那里，我有以下两难困境：我有一组带有子DIVS的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 -->

//这是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同时滑动/隐藏功能和goold old'shove-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; }                      
    );

});

修改

在回复你的评论时，我在this example上放了一些显示/隐藏部分，在IE6和Firefox 3中，所有这些部分似乎都适用于我。您可以通过添加{来编辑它的代码{1}}到网址上。此示例是否适用于您以及您使用的是哪种浏览器？

将JQuery toggle（）与#anchors混合使用

2 个答案: