Question

我正在尝试在THIS DEMO的一个地方（相同的CSS位置）加载两个<li>列表我不确定我使用的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);
      })();
   });    

})();

你能告诉我如何解决这个问题吗？两个清单都列在准确的顶部位置？

Answer 1

这与你的CSS有关，而不是你的javascript。默认情况下，ul元素为margin-bottom:10px。因此，第二个比你想要的低10px。要修复它，只需将以下内容添加到CSS

即可

ul { margin-bottom:0; }

Demo

在定位中捕获这样的错误的最佳方法是使用浏览器的inspect元素来搜索增加的空间

在旁注中，如果您在淡入其他列表时单击其他列表，则某些列表元素不会被隐藏。将.hide()更改为.hide(true, true)会修复其中某些内容

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

1 个答案: