将标签锚定到简单的Jquery手风琴以激活特定标签&位置

时间:2015-12-03 15:43:56

标签: jquery html accordion

我主要遇到一个问题,即锚点标记链接现在落在与特定标签有关的手风琴内容的居中位置。

JS:

<script>

$(document).ready(function() {

    var allPanels = $('.accordion > dd').hide();

    $('.accordion > dt > a').click(function() {
        allPanels.slideUp('normal');
        $(this).parent().next().slideDown('normal');
        return false;
    });

    $(location.hash).show();

});

</script>

更新了HTML:

  <dl class="accordion">

  <dt><a href="">Panel 1</a></dt>
  <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>

  <dt><a name="">Panel 2</a></dt>
  <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>

  <a name="#reviewpoints" style="">&nbsp;</a>  
  <dt><a name="#reviewpoints">Panel 3</a></dt>
  <dd id="reviewpoints">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>

  </dl>

单独页面上的链接:

<a href="/points/#reviewpoints">Review Points Test</a>

1 个答案:

答案 0 :(得分:2)

更新你的小提琴:

(function($) {

  var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    var hash = location.href.split("#")[1];
    $(location.hash).show();
    return false;
  });

})(jQuery);

小提琴:http://jsbin.com/reyosobifa/1