Question

好的，这是我的jsfiddle - http://jsfiddle.net/8947F/

基本上，slideToggle似乎会添加，然后在底部带走一些高度，这样它就会跳起来......

此外，点击会影响所有隐藏的div，如何让它仅适用于特定的div

这是我的jquery

$(function() {
$('article .folder-hover').hide();

    $('article').hover(function(){
    $(this).children('.folder-hover').show();
    },
function(){
    $(this).children('.folder-hover').hide();
});    

});

$(function() {
$('article .folder-items').hide();    


$("article").click(function () {
  $(".folder-items").slideToggle("slow");
});
});

任何获得它的方式所以只有当它的父元素被点击时它才会影响子div？什么是'跳'???

提前致谢

Answer 1

因为它正在选择所有folder-items。您应该通过传递上下文（this在您的案例中）来限制它在当前文章中找到。试试这个。

$(function() {
    $('article .folder-hover').hide();
    $('article').hover(function(){
        $(this).children('.folder-hover').show();
    },
    function(){
        $(this).children('.folder-hover').hide();
    });    
});

$(function() {
    $('article .folder-items').hide();    

    $("article").click(function () {
      $(".folder-items", this).slideToggle("slow");
    });
});

从folder-items css类中移除100％的高度，这将解决跳跃问题

.folder-items {
    clear: left;
    padding-top: 12px;
    margin-left: 48px;
    list-style: none;
}

<强> Demo

Answer 2

看看这个jsfiddle

http://jsfiddle.net/8947F/14/

顺利工作很好！

Answer 3

尝试更改

.folder-items {
    height:auto;
}

http://jsfiddle.net/8947F/4/

为什么slideToggle跳跃？以及如何让它仅适用于点击的文章？

3 个答案: