为什么要滑动切换跳跃？以及如何让它仅适用于点击的文章？

Question

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

基本上，slideToggle 似乎添加了然后去掉底部的一些高度，这样它看起来就像跳跃一样...

而且点击会影响所有隐藏的 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

看看这个 jsfiddle

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

工作顺利！

Answer 2

因为它正在选择所有文件夹项目。您应该通过传递上下文（在您的情况下为 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;
}

演示

Answer 3

尝试更改

.folder-items {
    height:auto;
}

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