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).parent().find('.boxed').show("slow");
});

它只会显示被.boxed点击元素的父元素内的.trigger元素。

于 2013-01-23T15:19:23.017 回答
2

试试这个代码：

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

This is happening because you are referencing a class for your show method. You should be referencing an ID instead, or at least you need to uniquely identify which div should pop out.

please try replacing your jQuery code with this, it should work:

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

in order to hide the popup after you stop hovering, use this code:

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