Вызов show () для list-item превращает его в блочный элемент и исчезает пуля

Question

Я новичок в JQuery, но начал с создания списка. У меня есть пустой список, поле ввода и ссылка для пользователя, чтобы добавить элементы в список. Когда я добавляю что-то, я бы хотел, чтобы это сначала было скрыто, а затем динамически отображалось с помощью JQuery. В настоящее время он добавляет его в список, но устанавливает display: block вместо display:list-item или вообще ничего. Я что-то не так делаю?

Итак, вот код

$('a#addstep').click(function() {
    if ( $('#step').val().length > 0 ) {
        $('<li />')
            .text($('#step').val())
            .hide()
            .appendTo('ol#instructions')
            .show('normal');
    }
});

Вот немного HTML

<ol id="instructions"></ol>
<input type="text" id="step" size="60" />
<a href="#" id="addstep">Add</a>

Answer 1

Я не совсем уверен, почему вы добавляете дополнительные вызовы, чтобы показать / скрыть. Когда вы добавите элемент, он будет показан. Пожалуйста, объясните, почему вам нужно показать / скрыть.

Если вам абсолютно необходимо.

$('a#addstep').click(function() {    
    if ( $('#step').val().length > 0 ) {        
        $('<li />')            
        .text($('#step').val())            
        .hide()            
        .appendTo('ol#instructions')            
        .show('normal', function() {
            $(this).css('display', 'list-item')
        });    
    }
});

Answer 2

Попробуйте это (не проверено):

$('a#addstep').click(function() {
    if ( $('#step').val().length > 0 ) {
        $('<li />')
            .css('display', 'list-item')   // ADDED
            .text($('#step').val())
            .hide()
            .appendTo('ol#instructions')
            .show('normal');
    }
});

Answer 3

попробуйте использовать

(". Theclass"). Css ("display", "inline {или желаемое значение}");

вместо шоу ('нормальный')