Question

......也许不那么简单。

首先，我试图在Wordpress中对此进行编码，不确定它是否与它有任何关系。我希望博客页面显示所有博客的标题。然后，当用户点击博客标题时，内容会向下滑动。 HTML将如下所示。

<div id="titel>Title of Post</div>
<div id="meta">Meta data WP adds</div>
<div id="entry">The content of the blog post.</div>

我使用functions.php中的一个函数自动引用Google上的jQuery。我正在使用CSS隐藏#entry。

现在，当我添加我的代码时：

<script type="text/javascript">

    $j=jQuery.noConflict();

    $j(document).ready(function(){

        $j('#title').click(function(){
            $j(this).next('#entry').slideToggle('1000');

        });


    });

</script>

没有任何反应。您可以单击标题但不能单击任何内容。但奇怪的是，如果您将代码更改为：

<script type="text/javascript">

    $j=jQuery.noConflict();

    $j(document).ready(function(){

        $j('#title').click(function(){
            $j('#entry').slideToggle('1000');

        });


    });

</script>

第一篇文章将获得动画。但是不应该（使用第二个代码），如果点击任何标题，所有#entry都会滑落？这是真正让我循环的部分。

感谢所有回复。这是确切的代码。这是HTML：

<div class="article-title"> <h2 class="entry-title"><a  title="Permalink to Similarities" rel="bookmark">Similarities</a></h2></div>

<div class="entry-content"><div class="article-entry"><p><span style="font-size: small;"> HERE IS THE BLOG CONTENT.....

以下是我现在拥有的代码：

<script type="text/javascript">

    $j=jQuery.noConflict();
    $j(document).ready(function(){
        $('.article-title').click(function(){
            $(this).siblings('.entry-content').slideToggle(1000);
        });
    });

</script>
</head>

Answer 1

首先，您应该考虑页面上只有一个具有特定ID的元素。因此，请确保所有博客条目元素至少包含类或唯一ID。这是一个选项：

<div class="title">Title of Post</div>
<div class="meta">Meta data WP adds</div>
<div class="entry">The content of the blog post.</div>

然后，您使用next()方法：

获取集合中每个元素的紧随其后的兄弟匹配的元素。

而你的下一个元素是meta阻止。您可以使用siblings()方法来解决entry。

$j('.title').click(function(){
    $j(this).siblings('.entry').slideToggle('1000');
});

Answer 2

第一个问题：ID是唯一的。每个ID应该只有一个元素。

第二个问题：你搞砸了ID的名字：

<div id="titel">Title of Post</div>

和

$j('#title').click(function(){

（titel！= title）

第三个问题：jQuerys next()函数访问下一个元素，这将是您案例中的元数据。

尝试这样的事情：

<强> HTML：

<div class="post">
    <div class="title">Title of Post</div>
    <div class="meta">Meta data WP adds</div>
    <div class="entry">The content of the blog post.</div>
</div>

<强> JS：

<script type="text/javascript">
    $j=jQuery.noConflict();
    $j(document).ready(function(){
        $j('.title').click(function(){
            $j(this).siblings('.entry').slideToggle('1000');
        });
    });
</script>

<强> CSS：

.entry{
    display:none;
}

Answer 3

首先对内容中大于1的元素使用类你也可以在jquery中使用父母。

<div>
  <div class="title">Title of Post</div>
  <div class="meta">Meta data WP adds</div>
  <div class="entry">The content of the blog post.</div>
</div>

$j('.title').click(function(){
   $j(this).parents('div').find('.entry').slideToggle('1000');
});

jquery简单的滑动动画

3 个答案: