jquery - jQuery函数后内联元素不起作用

Question

这是我的代码：

HTML：

<div id="top">
  <ul>
    <li>Setting</li>
    <li id="copyright">CopyRight</li>
    <li id="e_copyright">&copy CopyRight Daarkoob Data Processing Co.</li>
  </ul>
</div>

CSS：

#top {
    background: #000;
    height: 35px;
    border-top: 1px solid #FFF;
    color: #999;
    text-align: left;
    padding-bottom: 5px;
}

#top ul {
    list-style-type: none;
}

#top ul li {
    display: inline;
    cursor: pointer;
    margin-right: 50px;
}

#top ul li#e_copyright {
    display: none;
}

JS：

$(document).ready(function(){
  $("#top ul li#copyright").click(function(){
    $("#top ul li#copyright").hide(function(){
      $("#top ul li#e_copyright").show();
    });
  })
});

当我点击CopyRight时，第三个 li ( e_copyright ) 显示在Setting的底部，但我猜它会出现在 Settinf 的内联，因为我将li 的显示设置为内联。

单击第二个时如何更改代码以显示第三个？！

Answer 1

另一种方法：这里是li在点击版权行后添加一行的代码。它只会使用oneJQuery 事件发生一次。

<div id="top">
  <ul>
    <li>Setting</li>
    <li id="copyright">CopyRight</li>
  </ul>
</div>

$(document).ready(function(){
  $("#top ul li#copyright").one('click',function(){
    $("#top li:last").after('&copy CopyRight Daarkoob Data Processing Co.')
  });
});

Answer 2

试试这个：

$("#top ul li#copyright").click(function () {
    $(this).hide(function () {
        $(this).next().show().css({
            "display": "inline"
        });
    });
});

演示

Answer 3

ID 是唯一的，因此 ID 选择器是最具体且非冗余的。也不需要使用父选择器，这只会增加不必要的开销。请参阅下面的更新代码：

$(document).ready(function(){
    $("#copyright").click(function(){
        $(this).hide();
        $("#e_copyright").show().css('display','inline');
    });
});