0

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

   $(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>

但到目前为止还没有运气。根本没有用。更改中可能缺少某些内容或有问题...

任何想法？

4

2 回答 2

2

这是一个将 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'));
于 2013-07-25T17:22:57.697 回答
1

Anchor 默认是内联元素，如果你改变它的样式，display:block;那么动画是可见的。

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

jsfiddle /另一种选择

于 2013-07-25T17:23:26.370 回答