基于URL锚点哈希值打开Jquery手风琴

Question

我有一个常见问题折叠菜单。 每个问题都有一个类名为q，其中id为q1或q2或q3。 每个答案都有一个类名为a。

当url带有锚点/faq#q2时，我希望q2被触发。我有以下代码，但它不起作用。

我认为导致它不起作用的行是：if（hash）$(.q [id $ =“+ hash +”]）.trigger（'click'）;但我无法弄清楚问题所在。

  $(document).ready(function($) {
    
 $(".a").hide().first().show();
    $(".q:first").addClass("active");
 
    $('#accordion').find('.q').click(function(){

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

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

      //Find anchor hash and open
      var hash = $.trim( window.location.hash );
      if (hash) $(.q[id$="+hash+"]).trigger('click'); 
    });
  });

  .q {cursor: pointer;}
  .a {display: none;}
  .q.active + .accordion-content {
  display: block;
 }

<div id="accordion">
  <h4 class="q" id="q1">Accordion 1</h4>
  <div class="a">
    <p>Cras malesuada ultrices augue <a href="#q2" onclick="setTimeout('history.go(0);',800);">Open Accordion 2</a> molestie risus.</p>
  </div>
  <h4 class="q" id="q2">Accordion 2</h4>
  <div class="a">
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
  </div>
  <h4 class="q" id="q3">Accordion 3</h4>
  <div class="a">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

- user3108698

Answer 1

首先，您在jQuery选择器中丢失了单引号或双引号。如果我理解正确，您想要像这样的东西？

if (hash) {
  var element = $(hash);
  if (element.length) {
    element.trigger('click');
  }
}

更新 (http://jsfiddle.net/6hzby0aa/):

// Hide all panels
$(".a").hide();

// Show first panel by default
$(".q:eq(0)").next(".a").show();

// Get hash from query string. You can put there "#q1", "#q2" or something else for test
var hash = window.location.hash;

if (hash) {
    // Get panel header element
    var requestedPanel = $(hash);
    if (requestedPanel.length) {
        // Hide all panels
        $(".a").hide();
        // Show requested panel
        requestedPanel.next(".a").show();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
  <h4 class="q" id="q1">Accordion 1</h4>
  <div class="a">
    <p>Cras malesuada ultrices augue <a href="#q2" onclick="setTimeout('history.go(0);',800);">Open Accordion 2</a> molestie risus.</p>
  </div>
  <h4 class="q" id="q2">Accordion 2</h4>
  <div class="a">
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
  </div>
  <h4 class="q" id="q3">Accordion 3</h4>
  <div class="a">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

- Andrew Orlov

---

基本上，我只想让问题2在用户加载带有#q2的URL时自动打开。 - user3108698

你的意思是这样吗？ 如果有hash值，就点击$('.q[id="+hash+"]')。 - user3108698

@user3108698，我真的不知道为什么你还在使用“.q[id=...]”作为选择器。window.location.hash将返回“#q1”。实际上，这是您的元素ID。 - Andrew Orlov

我有点困惑，能否请您提供完整的代码。 - user3108698

@user3108698 是的。请查看我的更新答案。抱歉，我没有足够的声望来发表评论。 - Andrew Orlov

Answer 2

这是我的最终代码。感谢 @Andrew Orlov

<script type="text/javascript">
    $(document).ready(function($) {
        // Hide all panels
        $(".a").hide();

        // Show first panel by default
        $(".q:eq(0)").next(".a").show();
        $(".q:first").addClass("active");

        // Get hash from query string
        var hash = window.location.hash;

        if (hash) {
            // Get panel header element
            var requestedPanel = $(hash);
            if (requestedPanel.length) {
                // Hide all panels
                $(".a").hide();
                $('.q').removeClass("active"); // remove active
                // Show requested panel
                requestedPanel.next(".a").show();
                requestedPanel.addClass("active"); //add active
            }
        };


        $('body').find('.q').click(function() {
            //Expand or collapse this panel
            $(this).next().slideToggle('600');

            $('.q').removeClass("active"); // remove active
            $(this).addClass("active"); // add active

            //Hide the other panels
            $(".a").not($(this).next()).slideUp('fast');
        });
    });
</script>

- user3108698