无法在WordPress帖子中使用jQuery accordion

Question

我在报头中加入了jquery-ui-accordion，并包含了以下函数来激活它：

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

下面是html的设置方式。输出只是没有任何折叠功能的常规WordPress帖子的列表。我希望它能让标题变得可点击。有人能帮我找出我做错了什么吗？

    <?php get_header();?>

        <section id="content">

            <h2>Our Latest Videos</h2>

            <section id="latest-videos" class="video-archive">
                <section id="accordion">

                    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                    <article class="entry" id="post-<?php the_ID(); ?>">
                        <section class="description">
                            <h3><?php the_title(); ?></h3>
                            <div>
                                test test test
                            </div>
                        </section>
                    </article>

                <?php endwhile; ?>

                <?php endif; ?>

                </section>

            </section>

        </section>

    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

Answer 1

如果html标记有点像这样：

<section id="accordion">
  <article>
    <section class="description">
      <h3>First header</h3>
      <div>First content panel</div>
    </section>
  </article>
  <article>
    <section class="description">
      <h3>Second header</h3>
      <div>Second content panel</div>
    </section>
  </article>
</section>

那么，accordion将无法工作。要让它正常工作，您只需要在<section>中包含一对<h3>和<div>，如下所示：

<section id="accordion">
 <h3>First header</h3>
 <div>First content panel</div>
 <h3>Second header</h3>
 <div>Second content panel</div>
</section>

Answer 2

这个输出是什么样子的？您可能希望使用在浏览器中生成的标准标记，然后实现accordion。这样，您不仅可以确认它按您希望的方式工作，而且还可以更好地理解该插件。之后，将其移植到wp应该是相当容易的。

Answer 3

别太在意了！它可以在包装在<article>中时有效！您在<article>上包装它，然后在您的js代码上添加以下参数：

    $('#accordion').accordion({
       header: "article h3",
     });

正如您所注意到的，您只需将头新位置放入参数中！它是文章标签的子 :)