如何通过锚打开手风琴并设置活动状态

Question

我对jquery不太熟悉。但是我想要实现具有以下功能的手风琴：手风琴应该以两种方式打开。 1）通过单击同一页面上的外部导航。 2）点击手风琴标题 另外，我希望在下面的导航中有一个活动状态，在手风琴的li-Tag上有第二个。

我的导航结构：

<a href="#a" class="opener" data-panel="0">A</a>
<a href="#b" class="opener" data-panel="1">B</a>
<a href="#c" class="opener" data-panel="2">C</a>

我的手风琴结构：

<li id='a'>
    <h2><Headline</h2>
    <ul class='inner'>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</li>

你能不能给我一个建议，如何达到这个目的？非常感谢！！！

Answer 1

您只需要在手风琴打开的两个事件上调用相同的函数。只需将两种情况下的“单击”事件绑定到所需的结果即可。

Answer 2

使用此代码与jquery手风琴...

添加这些链接

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

将此脚本添加到头部

  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>

在html中添加此代码

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
   Option 1
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Option 2
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Option 3
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>