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

您只需要在要打开手风琴的两个事件上调用相同的功能。只需将两种情况下的“ click”事件与所需结果联系起来即可。

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>

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

2 个答案: