0

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

首先，我正在尝试在 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>
4

3 回答 3

0

首先，您应该考虑页面上应该只有 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');
});
于 2012-05-12T13:27:24.520 回答
0

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

第二个问题：你弄乱了ID的名称：

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

和

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

（标题！=标题）

第三个问题：jQuerysnext()函数访问下一个元素，在您的情况下是元数据。

尝试这样的事情：

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;
}
于 2012-05-12T13:38:26.737 回答
0

首先对 content 中大于 1 的元素使用 class。
您还可以在 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');
});
于 2012-05-12T13:40:14.810 回答