jquery toggle_container使用页面内的锚链接来展开切换

时间:2014-02-27 21:10:13

标签: jquery html hyperlink toggle accordion

我正在使用切换容器来展开大页面的各个部分。在这些部分中,内容不仅链接到其他页面,还链接到页面其他部分中的链接。我试图使用锚链接,页面移动到一般区域,但不会扩展切换。

<script> 
$(document).ready(function () {
  //Hide (Collapse) the toggle containers on load
  $(".toggle_container").hide();

  //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
  $("h3.trigger").click(function () {
  $(this).toggleClass("active").next().slideToggle("slow");
  return true; //Prevent the browser jump to the link anchor
  });
  $("a[href='" + window.location.hash + "']").parent(".trigger").click();
  });
  if (window.location.hash) {
    $('h3.trigger + .toggle_container').hide(); // Hide all...
    $('h3.trigger').has("a[href='" + window.location.hash + "']").next('.toggle_container').show(); // ... but show one
    } 
</script>

<h3 class="trigger"><a name="1.8" href="#1.8">1.8 &nbsp;&nbsp; blah ablshdasd</a></h3>
<div class="toggle_container" >
   <p class="column1">1.8 &nbsp;&nbsp; djhsa;ksjag;fjgancvjwer design requirements.</p>
   <ol class="alpha-small">
      <li>more text</li>
   </ol>
   <br /><br />
<h3 class="trigger"><a  href="#1.9">1.9 &nbsp;&nbsp; Blah Blah</a></h3>
<div class="toggle_container">
   <p class="column1">text goes here...... <a href="#1.8">1.8.</a></p>            
   <br /><br />
</div>  

1 个答案:

答案 0 :(得分:0)

我不确定window.location.hash是否适用于jsfiddle ...

我怀疑你是否要改变这一行

$("a[href='" + window.location.hash + "']").parent(".trigger").click();

使用name =而不是href =它可能会做你期望的事情。

或者,你可以放弃对window.location.hash的依赖,并按照这一点(fiddle)做更多的事情

$(document).ready(function () {
    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide();

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $("h3.trigger").click(function () {
        $(this).toggleClass("active").next().slideToggle("slow");
        return true; //Prevent the browser jump to the link anchor
    });
    $("a.open").click(function() {
        hrefval = $(this).attr("href").match(/(\d+\.\d+)/)[1]
        $("a[name='" + hrefval + "']").parent(".trigger").click() //open the new one
    })
});

请注意,这会使用您的课程&#34; open&#34;知道要绑定到哪个锚标签以便在页面的各个部分内跳转。