javascript - 为什么元素从他的父母中移除？

Question

请检查链接http://jsfiddle.net/KvscH/6/。

您可以检查inspect element动画中的SPAN贯穿于LI但我不知道为什么会发生这种情况，我希望SPAN保持在LI内。

帮助表示赞赏:)

Answer 1

这是因为使用了javascript。

由于 javascript 中的以下行，Boo1 第一次可见。

ticker.children(':first').show().siblings().hide();

当我们调用 时show()，它会删除display:none。同样hide()添加display:none或visibility:hidden。您可以使用 firebug 并检查应用的样式。

注意：li{display:none}如果从 CSS中删除 ，您将获得相同的功能。

Answer 2

我想你在这之后：http: //jsfiddle.net/TmNLE/

var ticker = $('ul.ticker');
var tickerli = $('ul.ticker li');
ticker.children(':first').show();

$('.next').live ('click', function () {
    $('li:visible').fadeOut(function() {
       $(this).appendTo(ticker);
       ticker.children().first().show();
    });
});

$('.prev').live ('click', function () {
    $('li:visible').fadeOut(function() {
       ticker.find('li:last').insertBefore(ticker.find('li:first'));
       ticker.children().first().show();
    });
});

Answer 3

由于 CSS 的特殊性，这种内联样式正在被应用和覆盖：

display: list-item;

提高特异性的一种方法是使用：

.ticker li {
    display:none !important;
}​

Answer 4

只需调试代码并检查您应用的样式。

此问题是由于您的代码中的以下 javascript 行

ticker.children(':first').show().siblings().hide();

添加这一行

ticker.children(':first').show();