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

这个的输出是什么样的？您可能想要在浏览器中生成标准标记，然后实现手风琴。这样，您不仅可以确认它按照您希望的方式工作，而且您可以更好地了解插件。之后将其移植到wp应该非常简单。

Answer 2

如果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将无效。要使其正常工作，您需要在<h3>内只有<div>和<section>对，如下所示：

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

Answer 3

不要难以忍受！它包含在 <article> 中时可以有效！您将其包裹在<article>上，然后在 js代码上添加以下参数：

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

正如您所注意到的，您只需将标题新位置放在参数中即可！这是文章标签的孩子 :)

无法使jQuery手风琴适用于WordPress帖子

3 个答案: