0

我在标题中排队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(); ?>
4

3 回答 3

0

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

于 2013-01-14T03:09:52.200 回答
0

如果 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>
于 2013-01-14T03:43:28.687 回答
0

不要把它硬！它可以在包裹时有效<article>！你把它包装起来<article>，然后在你的js 代码上添加以下参数：

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

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

于 2014-02-17T19:19:41.980 回答