Jquery 在一个CSS位置加载两个列表项（顶部位置）

我试图在一个位置加载两个

列表（相同的CSS位置），我不确定我使用的jQuery是否是最好的方法，但到目前为止，它对我有效。 唯一的问题是在两个不同的位置加载两个列表。以下是我的代码：

(function() {
   var lis1 = $('.listOne li').hide();
   var lis2 = $('.listTwo li').hide(); 
   $('.disone').click(function() {
        var i = 0;
       (function displayList() {
        $('.listTwo li').hide();
         lis1.eq(i++).fadeIn(400, displayList);
      })();
   }); 
     $('.distwo').click(function() {
           $('.listOne li').hide();
        var i = 0;
       (function displayList() {

         lis2.eq(i++).fadeIn(400, displayList);
      })();
   });    

})();

---

您能告诉我如何修复它，使两个列表都以精确的顶部位置填充吗？

这与您的CSS有关，而不是与您的javascript有关<代码>ul元素默认具有

页边距底部：10px

。因此，第二个是低于你想要的10px。要修复它，只需在CSS中添加以下内容

ul { margin-bottom:0; }

捕捉定位中类似错误的最佳方法是使用浏览器的inspect元素搜索添加的空间

---

在旁注中，如果您在另一个列表淡入时单击该列表，则其中一些列表元素不会隐藏。将

.hide（）

更改为

.hide（true，true）

修复了一些问题

谢谢Zach，您的提示也非常有用。