javascript - 使用 jQuery 定位 Accordion 中的特定元素

Question

我想从另一个页面(例如 page.html#secondItem)链接到 Accordion 中的特定面板。我读过我必须使用 location.hash 但不确定如何在此示例中使用。

有人可以指点一下吗

演示: http://jsbin.com/macamorasi/1/edit?html,css,js,output

$(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
  });

.accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}

<div id="accordion">
  <h4 class="accordion-toggle" id="firstItem">Accordion 1</h4>
  <div class="accordion-content default">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-toggle" id="secondItem">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
  </div>
  <h4 class="accordion-toggle" id="thirdItem">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

http://jsbin.com/macamorasi/1/edit?html,css,js,output

Answer 1

您可以检查是否 location.hash存在。如果是，请使用它找到感兴趣的元素，然后将其向下滑动。然后您可以使用 .siblings()寻找其他<h4>元素，并获取他们的下一个邻居并将它们向上滑动。

$(document).ready(function($) {
  // General accordion click toggle
  $('#accordion').find('.accordion-toggle').click(function(){

    //Expand or collapse this panel
    $(this).next().slideToggle('fast');

    //Hide the other panels
    $(".accordion-content").not($(this).next()).slideUp('fast');

  });

  // Check for location hash
  if(location.hash) {
    // Remove the first '#' character
    var hash = location.hash.substr(1);

    // Expand element 
    if($('#'+hash).length) {
      $('#'+hash)
        .next()
          .slideDown()
          .end()
        .siblings('h4')
          .next()
          .slideUp();
    }
  }
});

请在此处查看完整代码:http://jsbin.com/bonozoqezo/1/edit .要获得适当的演示，请使用哈希访问全屏演示:http://jsbin.com/bonozoqezo/1#secondItem