Question

有没有办法创建一个JQuery slidedown（）函数，该函数仅在鼠标所关注的div上分配。

这种事情可以通过JQuery的组合实现，但我设法实现了这一点：只有每个div都有单独的类，我才能使它工作。如果我将它们命名为相同，它将打开（向下滑动）第一个div上悬停的所有div标签。

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

我的代码如下：

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个问题时，这是有效的，但是一百个问题呢？使用我的代码，为每个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

在你的代码中有一个参数，它将指向鼠标光标所在的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;
}

使用JQuery和SLidedown（）函数仅影响onhover div标签

3 个答案: