0

タイトルと抜粋を含む記事がたくさんあります。タイトルにカーソルを合わせると、抜粋が折りたたまれます。ここに私のコードがあります:

<div class="search-post" id="post-290">

    <div class="posty-content">
    <h2 class="title trigger"><a href="http://qa.cidev.info/case-study/future-shop-case-study/" rel="bookmark" title="Permanent Link to Future Shop Case Study">Future Shop Case Study</a></h2>

    <div class="entry boxed">
        <p>Overview Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras&#8230;</p>
    </div>
    <div class="info">
    </div>
    </div>
    <div class="float-divider"></div>
</div>

<div class="search-post" id="post-288">

    <div class="posty-content">
    <h2 class="title trigger"><a href="http://qa.cidev.info/case-study/tiger-direct-case-study/" rel="bookmark" title="Permanent Link to Tiger Direct Case Study">Tiger Direct Case Study</a></h2>

    <div class="entry boxed">
        <p>Overview Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras&#8230;</p>
    </div>
    <div class="info">
    </div>
    </div>
    <div class="float-divider"></div>
</div>

<div class="search-post" id="post-286">

    <div class="posty-content">
    <h2 class="title trigger"><a href="http://qa.cidev.info/case-study/kfc-case-study/" rel="bookmark" title="Permanent Link to KFC Case Study">KFC Case Study</a></h2>

    <div class="entry boxed">
        <p>Overview Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras&#8230;</p>
    </div>
    <div class="info">
    </div>
    </div>
    <div class="float-divider"></div>
</div>

そして私の現在のjquery

$('.trigger').hover(function() {
   $('.boxed').show("slow");
});

問題は、トリガーにカーソルを合わせると、ボックス化されたすべてのアイテムが表示されます。現在の投稿コンテンツ ボックスを開いてほしいのですが、何かアイデアはありますか??

4

3 に答える 3

2

このコードを試してください：

$('.trigger').hover(function() {
   $(this).siblings('.boxed').show("slow");
});
于 2013-01-23T15:19:49.443 に答える
2

これを試して...

$('.trigger').hover(function() {
    $(this).parent().find('.boxed').show("slow");
});

.boxedクリックした要素の親内の要素のみが表示されます.trigger。

于 2013-01-23T15:19:23.017 に答える
0

これは、showメソッドのクラスを参照しているために発生しています。代わりにIDを参照する必要があります。または、少なくとも、どのdivをポップアウトするかを一意に識別する必要があります。

jQueryコードをこれに置き換えてみてください。動作するはずです。

$('.trigger').hover(function() {
   $(this).parent().find('.boxed').show("slow");
});

ホバーを停止した後にポップアップを非表示にするには、次のコードを使用します。

$('.trigger').hover(function() {
    $(this).parent().find('.boxed').show("slow");
},function(){
    $(this).parent().find('.boxed').hide("slow");
});
于 2013-01-23T15:24:42.640 に答える