Как открыть аккордеон через якорь и установить активное состояние - PullRequest
Новая
       28

Как открыть аккордеон через якорь и установить активное состояние

0 голосов
/ 13 марта 2019

Я не очень знаком с 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>

Не могли бы вы, ребята, дать мне совет, как этого достичь?Большое спасибо !!!

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

Используйте этот код для аккордеона с 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>
0 голосов
/ 13 марта 2019

Вам просто нужно, чтобы одна и та же функция вызывалась в обоих случаях, когда вы хотите открыть аккордеон.Просто свяжите событие «click» в обоих случаях с желаемым результатом.

...