为什么滑动切换跳跃?以及如何使其仅适用于点击的文章

Question

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

基本上，滑动摇杆似乎增加了底部的高度，然后去掉了一些高度，看起来像是在跳跃。。。

此外，点击会影响所有隐藏的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时影响子div？那"跳跃"是怎么回事？？？

提前感谢

Answer 1

查看这个jsfiddle

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

工作很好，很顺利！

Answer 2

因为它正在选择所有的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");
    });
});

删除高度100%从文件夹项目css类这将修复跳转问题

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

演示

Answer 3

尝试更改

.folder-items {
    height:auto;
}

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