JQuery UI accordian

Question

Мне удалось сделать аккордеон JQuery UI на главной странице моего сайта Wordpress.

Проблема заключается в том, что вместо открытия и закрытия divs, когда я нажимаю на заголовки, эффект возникает, когда я нажимаю на случайные фрагменты текста, например, щелкнув по середине абзаца.

Я бы хотел сделать так, чтобы, если я нажму на заголовок (h2 или h3 и т. Д.), Он откроет раздел под заголовком. Прямо сейчас, похоже, работает, когда я нажимаю в середине абзаца, или иногда он работает, когда я нажимаю на заголовок, но потом он не работает, когда я нажимаю на заголовок в следующий раз ... Я полностью смущен ,

Я всегда думал, что он автоматически работает с заголовками (аналогично плагину аккордеона, который у меня есть на другом сайте). Я не могу найти какую-либо информацию в Интернете, которая очищает это для меня.

Вот мой аккордеон сценарий:

$(function() { 
$("#accordion").accordion({ 
}); 
    }); 

РНР ниже код показывает DIV я хочу аккордеон действовать дальше. Понимаете, я вытаскиваю содержимое на свою первую страницу с другой страницы Wordpress. Обратите внимание на «гармошка» DIV там ...

  <section id="faq"> 
      <div class="indent"> 
        <?php 
     $query = new WP_Query('pagename=faq'); 
     // The Loop 
     if ($query->have_posts()) { 
      while ($query->have_posts()) { 
       $query->the_post(); 
       echo '<div class="entry-content">'; 
       echo '<div id="accordion">'; //This the div that should be affected... 
       the_content(); 
       echo '</div>'; 
       echo '</div>'; 
      } 
     } 

     /* Restore original Post Data */ 
     wp_reset_postdata(); 
     ?> 
      </div> 
     </section> 

Может проблема что-то делать с тем, что я потянув в содержание другой страницы?

BTW. У меня также есть несколько других скриптов, работающих в том же JS-файле, что и скрипт аккордеона, но я прокомментировал это, и проблема осталась.

Вот как весь JS файл выглядит, только в случае, если вы хотели бы видеть:

jQuery(document).ready(function($) { 

/* Stick navigation to the top of the page */ 
var stickyNavTop = $('.main-navigation').offset().top; 

$(window).scroll(function(){ 
    var scrollTop = $(window).scrollTop(); 

    if (scrollTop > stickyNavTop) { 
     $('.main-navigation').addClass('sticky-header'); 
     $('.site-header').addClass('shifted'); 
    } else { 
     $('.main-navigation').removeClass('sticky-header'); 
     $('.site-header').removeClass('shifted'); 
    } 

}); 

     /* Scroll to specific section on front page */ 
$(function() { 
$('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
      $('html,body').animate({ 
       scrollTop: (target.offset().top - 50) 
      }, 1000); 
      return false; 
     } 
    } 
}); 
}); 


    /* Accordion effect */ 
    $(function() { 
$("#accordion").accordion({ 
}); 
    }); 


}); /* Ends the jquery declaration */ 

Все оцененная помощь. Спасибо!

Answer 1

Ваш код печатает несколько разделов #accordion, когда это должно быть только одно обертывание всех предметов аккордеона. Оно должно быть как:

if ($query->have_posts()) { 
    echo '<div id="accordion">'; 
    while ($query->have_posts()) { 
     $query->the_post(); 
     echo '<h3>'.get_the_title().'</h3>'; 
     echo '<div class="entry-content">'; 
     the_content(); 
     echo '</div>'; 
    } 
    echo '</div>'; 
} 

Таким образом, вы будете иметь код, похожий на представленный в docs: один #accordion обертывание детали, то <h3> как названия и <div> как содержание.

Answer 2

Я решил проблему, обернув весь фрагмент страницы в «аккордеоне» div (оставив только заголовок и нижний колонтитул), а затем создав скрипт только для заголовков H6.

Спасибо!