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をクリックすると、 Settingの下部に 3 番目の li ( e_copyright ) が表示されますが、 li の表示をインラインに設定したため、Settinf のインラインに表示されると思います。

2番目のliがクリックされたときに3番目の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');
    });
});