Jquery UI 手风琴？答案

【问题标题】：Jquery UI accordion?Jquery UI 手风琴？
【发布时间】：2016-06-13 07:11:46
【问题描述】：

我已经设法让 Jquery UI 手风琴在我的 Wordpress 网站的首页上工作。

问题是，当我单击标题时，不是打开和关闭 div，而是在单击文本的随机部分时出现效果，例如单击段落的中间。

我想这样做，如果我单击标题（h2 或 h3 等），它会打开标题下方的部分。现在，当我单击段落中间时它似乎可以工作，或者有时当我单击标题时它可以工作，但是当我下次单击标题时它不起作用......我完全糊涂了.

我一直认为它会自动与标题一起使用（类似于我在另一个站点上的手风琴插件）。我在网上找不到任何可以帮我解决这个问题的信息。

这是我的手风琴脚本：

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

下面的 PHP 代码显示了我希望手风琴作用的 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>

问题是否与我从另一个页面中提取内容有关？

顺便说一句，我还有几个其他脚本在与手风琴脚本相同的 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 */

【问题讨论】：

您应该尝试使用MCVE 并删除PHP 部分，因为您的问题与HTML/javascript 有关。如果您可以将 PHP 输出扁平化为 HTML，人们可以重现您的问题，您将获得更好的答案。

标签： php jquery wordpress user-interface accordion

【解决方案1】：

您的代码正在打印几个#accordion div，而它应该只有一个包装所有手风琴项目。应该是这样的：

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> 作为内容。

【讨论】：

那行不通。我什至尝试将 html 标记直接放入 php 页面。手风琴效应发生了，但它是随机的。我点击一个段落，标题就消失了。我点击一个标题，有些工作，有些没有。 jquery ui 手风琴不应该可以点击标题吗？标记的外观应该如何？
是的，它应该这样工作。使用 wordpress 回显的 HTML 编辑您的问题，也许有助于找出问题。

【解决方案2】：

我通过将页面的整个正文包装在“手风琴”div 中解决了这个问题（只留下页眉和页脚），然后让脚本只在 H6 标题上工作。

谢谢！

【讨论】：