Question

我有很多带有标题和摘录的文章，我希望在悬停标题时将摘录折叠起来。这是我的代码：

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

问题是当我将鼠标悬停在触发器上时，所有盒装物品都显示出来，我只想让当前的帖子内容框打开，任何想法？

Answer 1

试试这个......

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

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

Answer 2

试试这段代码：

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

Answer 3

这种情况正在发生，因为您正在引用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");
});

Jquery Hover标题，折叠div

3 个答案: