Question

我想从另一个页面（例如page.html#secondItem）链接到我的手风琴中的特定面板。我已经读过我要使用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

使用jQuery定位Accordion中的特定项目

1 个答案: