Question

这里我有一个jQuery缓入/退出功能，我试图将它从ul li转换为表格，但它对我不起作用。

   $(document).ready(function(){
      $('.topnav li').find('a[href]').parent().each(function() {
        var li = $(this),
        a = li.find('a'),
        div = $('<div>' + '<\/div>');

        li.hover(function() {
        a.stop().animate({marginTop: '-135'}, 600, "easeOutBack");
      },
      function() {
        a.stop().animate({marginTop: '0'}, 500, "easeOutBack");
      })
      .append(div);
    });
  });

我想知道除了将我的主要ul类从 .topnav li 替换为 .topnav tr td

之外我还有什么变化？

之前我使用过这个html：

 <ul class="topnav">
    <li><a href="#">my link</a><div>hello</div></li>
 </ul>

然后我把它改成了这样的表：

<table class="topnav">
<tr>
<td><a href="#">my link</a><div>hello</div></td>
</tr>
</table>

但到目前为止还没有运气。完全不起作用。可能有些东西缺失或者变化出现了问题...

有什么想法吗？

Answer 1

这是将UL转换为TABLE（以某种方式）的函数：

function ul2table(ul){
    var tbl = $('<table class="topnav"/>');
    ul.find('li').each(function(){
        tbl.append($('<tr/>').append($('<td/>').html($(this).html())));
    });
    ul.replaceWith(tbl);
}

和用法：

  ul2table($('ul.topnav'));

Answer 2

Anchor默认是内联元素，如果将其样式更改为display:block;，则动画可见。

table td a {
    display:block;
    margin-bottom: 115px;
}
table td {
    height:135px;
    float:left;
    overflow:hidden;
}

jsfiddle / another alternative

将jQuery缓动代码从ul li转换为table

2 个答案: