jquery简单滑动动画

……也许不是那么简单

首先，我试图用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来隐藏条目

现在，当我添加代码时：

<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>

第一篇文章将获得动画。但是，使用第二个代码，如果单击任何标题，所有条目都会向下滑动，这难道不是应该的吗？这才是真正让我陷入困境的部分

谢谢你的回复。这是目前的确切代码。以下是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>

---

<>首先，你应该考虑页面上只有特定ID的1个元素。因此，确保所有博客条目元素至少都有类或唯一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>

---

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

第二个问题：您弄错了ID的名称：

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

滴度！=头衔

第三个问题：jQuerysNext函数访问下一个元素，在您的例子中，下一个元素就是元数据

试着这样做：

HTML:

---

对于内容中大于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');
});

---

ID是唯一的，它将只找到第一个ID，而使用类。id拼写错误，兄弟，不确定谁投了下面的反对票，请注意回复，干杯！我投了反对票，答案不是$j是错误的，应该用$j代替，因为他在模式中使用jQeury，请阅读文档。@adeneo所以我只是想说明为什么不保持简单，用$j代替$j，不管怎样，伙计，别着急！很高兴你读了这些文件！干杯好吧，那太好了，但是如果他的页面上有另一个脚本已经在使用$进行其他操作，那么就会发生冲突，因此使用noConflict方法？我将ID更改为Class并使用了同级选择器，但仍然无法工作？？单击标题时会发生什么情况？没什么？奇怪，它应该能用。你用的是什么浏览器？你能给我们看一下你的全部代码或者给我们一个你网站的URL吗？我用的是Chrome。该站点位于我的笔记本电脑上，但我将复制代码：您在JavaScript中混合了$j和$。如果您想在无冲突模式下使用jQuery，则必须继续使用$j。将代码中的$更改为$j。我尝试过这个，但当我点击标题时，所有的文章都打开了。谢谢，我脑子里有兄弟姐妹和下一个倒转的工作。我尝试使用兄弟姐妹选择器，但仍然无法工作。我还将ID添加到类中。

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

<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>

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

.entry{
    display:none;
}

<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');
});