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>

最初の投稿でアニメーションが取得されます。しかし、（この2番目のコードを使用して）タイトルのいずれかをクリックすると、すべての#entryがスライドダウンするのではないでしょうか。それは本当に私のforループを投げている部分です。

すべての回答をありがとう。現状の正確なコードは次のとおりです。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

まず、ページ上に特定のIDを持つ要素が1つだけ存在する必要があることを考慮する必要があります。したがって、すべてのブログエントリ要素に少なくともクラスまたは一意のIDがあることを確認してください。ここに1つのオプションがあります：

<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ごとに1つの要素のみが存在する必要があります。

2番目の問題：IDの名前をめちゃくちゃにしました：

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

と

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

（titel！=タイトル）

3番目の問題：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

コンテンツに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');
});
于 2012-05-12T13:40:14.810 に答える