JQuery аккордеон, нажав на уже открытый элемент аккордеона, просто переключает его - PullRequest
Новая
       13

JQuery аккордеон, нажав на уже открытый элемент аккордеона, просто переключает его

0 голосов
/ 13 октября 2009

У меня есть полуработающий пример , который вы можете посмотреть.

Кажется, это работает так, как хотелось бы большинству, хотя в нем есть ошибка, которую я вижу во многих других аккордеонах: если вы нажмете на уже открытую ссылку на заголовок, она закроется, а затем снова откроется. *

Какие-нибудь элегантные решения?

Вот jQuery 

 <script language="javascript">
      $(document).ready(function() {

        // Simple Accordion Style Menu Function
        $('h2.question').click(function() {
            $('div.answer').slideUp('normal');  
            $(this).next().slideDown('normal');
        });

        // Closes All Divs on Page Load
        $("div.answer").hide();

        // Opens the first div
        var Current = $('.question:first');
           Current.next().show();

      });
 </script>

А вот основная разметка, которую я хочу использовать: 

 <div class="accordion">
      <h2 class="question"><a href="#">Header 1</a></h2>
      <div class="answer">
           <p>some body content 1</p>
           <p>some body content 2</p>
           <p>some body content 3</p>
      </div>

      <h2 class="question"><a href="#">Header 2</a></h2>
      <div class="answer">
           <p>some body content a</p>
           <p>some body content b</p>
           <p>some body content c</p>
      </div>

      <h2 class="question"><a href="#">Header 3</a></h2>
      <div class="answer">
           <p>some body content x</p>
           <p>some body content y</p>
           <p>some body content z</p>
      </div>
 </div>

1 Ответ

2 голосов
/ 13 октября 2009

Вы можете попробовать добавить класс на h2, чтобы отметить его активность, а затем проверять это на каждом клике h2? Если у него есть активный класс, то ничего не делайте, так как он уже открыт. Также при загрузке страницы он дает первому h2.question класс active. 

<script language="javascript">
      $(function() {
            // Simple Accordian Style Menu Function
            $('h2.question').click(function() {
              if(!$(this).hasClass('active')) {
                $('div.answer:visible').slideUp('normal').prev('h2.question').removeClass('active');
                $(this).addClass('active').next().slideDown('normal');
              }
            });

            // Closes All Divs on Page Load
            $("div.answer").hide();

            // Opens the first div
            var Current = $('h2.question:first');
               Current.addClass('active').next().show();

          });
     </script>
...