встроенный элемент не работает после того, как функции 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, третий ли (e_copyright) в нижней части Установка, но я догадался, что он появится в строке Settinf beacause. Я установил li's display inline.

Как изменить код, чтобы появиться третий ли, когда второй щелкнул?!

Answer 1

Другим подход: здесь есть код, чтобы добавить li строки после нажатия на авторской линии. Это произойдет только один раз, используя событие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

Идентификаторы уникальны, поэтому идентификаторы являются наиболее конкретными и не являются избыточными. Не нужно также использовать родительские селектора, что просто добавляет лишние накладные расходы. Смотрите обновленный код ниже:

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

Answer 3

Попробуйте это:

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

Demo