JQuery UI баян?

Мне удалось заставить аккордеон JQery UI работать на первой странице моего сайта WordPress.

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

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

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

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

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

Код PHP ниже показывает div, на котором я хочу, чтобы аккордеон действовал. Видите ли, я перетаскиваю контент на свою первую страницу с другой страницы в WordPress. Обратите внимание на «гармошку» там …

            <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>

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

Кстати, у меня также есть несколько других скриптов, работающих в том же файле 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 */

1

Решение

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

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>';
}

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

0

Другие решения

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

Спасибо!

0