仅影响带有 JQuery 和 SLidedown() 函数的 onhover div 标签

Question

有没有办法创建一个 JQuery slidedown() 函数，该函数将只分配在鼠标聚焦的 div 上。

这种事情在 JQuery 的组合中是可能的，但我只能做到这一点：只有当每个 div 都有单独的类时，我才能使它工作。如果我将它们命名相同，它将在第一个 div 的悬停时打开（向下滑动）所有 div 标签。

所以，我希望这是一个我看不到的简单解决方案。

我的代码如下：

FIDDLE

HTML

<div class="q1">1. Question (on hover)<br/>
<div class="desc1">Description: Here goes the question one from the php variable</div>
<br/></div>
<div class="q2">2. Question (on hover)<br/>
<div class="desc2">Description: Here goes the question two from the php variable</div>
<br/></div>
<div class="q3">3. Question (on hover)<br/>
<div class="desc3">Description: Here goes the question three from the php variable and so on</div>
<br/></div>

JQUERY

jQuery(function () {
  for (var i = 0; i < 100; ++i) {
    (function (i) {
        jQuery('.desc' + i).hide(); 
        jQuery('.q' + i).hover(
            function () {
                jQuery('.desc' + i, this).stop(true, true).delay(300).slideDown(300);
            },
            function () {
                jQuery('.desc' + i, this).stop(true, true).slideUp(200);            
            });
     }(i));
  }});

CSS

.desc1,.desc2,.desc3 {
    font-size: 12px;
    font-style: italic;
}

.q1,.q2,.q3 {
    font-weight:bold;
}

所以，当只有 3 个问题时，这是可行的，但 100 个问题呢？使用我的代码为每个 div 创建 css 将毫无意义，所以我知道有一个简单的解决方案:) :(

Answer 1

小提琴：http://jsfiddle.net/GzxJf/4/

脚本：

jQuery(".desc").hide();

jQuery(".q").hover(function(){
    jQuery(this).find(".desc").stop().slideDown("slow");
}, function(){
    jQuery(this).find(".desc").stop().slideUp("slow");
});

Answer 2

这是一种可能适合您的潜在解决方案：

*Updated Demo Fiddle

由于您不知道可能有多少问题，或者是否会动态加载或删除一些问题，我将委托包装元素（在本例中为文档）。那么你需要做的就是在问题中与你的班级保持一致。

编辑 - 为了避免混淆，我继续更新它以添加一个包装元素以避免绑定到文档。见下文：

HTML：

<div class="q-wrapper">
    <div class="q">1. Question (on hover)<br/>
    <div class="desc">Description: Here goes the question one from the php variable</div>
    <br/></div>
    <div class="q">2. Question (on hover)<br/>
    <div class="desc">Description: Here goes the question two from the php variable</div>
    <br/></div>
    <div class="q">3. Question (on hover)<br/>
    <div class="desc">Description: Here goes the question three from the php variable and so on</div>
    <br/></div>
</div> 

JS：

$('.q-wrapper').on('mouseenter mouseleave','.q', function(e){
    if (e.type === 'mouseenter'){
        $(this).find('.desc').stop(true, true).slideDown();
    }
    else {
        $(this).find('.desc').slideUp();
    }
});

Answer 3

在您的代码中有一个参数 this 将指向鼠标光标所在的 div。因此，实际上，正如您在下面的小提琴中看到的那样，这将正常工作。

只需更改一点您的代码（css 类名和 jQuery 元素），它就会起作用。

FIDDLE

HTML

<div class="q">1. Question (on hover)<br/>
<div class="desc">Description: Here goes the question one from the php variable</div>
<br/></div>
<div class="q">2. Question (on hover)<br/>
<div class="desc">Description: Here goes the question two from the php variable</div>
<br/></div>
<div class="q">3. Question (on hover)<br/>
<div class="desc">Description: Here goes the question three from the php variable and so on</div>
<br/></div>

jQuery

jQuery(function () {
  for (var i = 0; i < 100; ++i) {
    (function (i) {
        jQuery('.desc').hide(); 
        jQuery('.q').hover(
            function () {
                jQuery('.desc', this).stop(true, true).delay(300).slideDown(300);
            },
            function () {
                jQuery('.desc', this).stop(true, true).slideUp(200);            
            });
     }(i));
  }});

CSS

.desc {
    font-size: 12px;
    font-style: italic;
}

.q {
    font-weight:bold;
}