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）显示在设置的底部，但我猜它会显示为Settinf的内联，因为我设置了 li's 显示内联。

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

Answer 1

另一种方法：此处是在点击版权专线后添加li行的代码。它只会使用one JQuery事件发生一次。

<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"
        });
    });
});

Demo

Answer 3

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

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

在jQuery函数之后，内联元素不起作用

3 个答案: