2015-02-28 3 views
2

Я хочу функцию open-close. Если <div> открыт, он должен закрыться, когда я нажимаю на него, а когда я его снова нажму, он снова откроется. JSFiddleelse, если предложение не работает должным образом

HTML

<div class='answer'>answer</div> 
    <div style='display:none'> 
    <textarea name='talking'></textare> 
    <input type='submit'> 
</div> 

Jquery

$('.answer').click(function(){ 
    if($(this).next().css('display','none')){ 
     $(this).next().css('display','block'); 
    }else if($(this).next().css('display','block')){ 
     $(this).next().css('display','none'); 
    } 
}) 

В этом примере "если" пункт работает (открывает), но "еще, если" не работает (она не закрывается еще раз).

ответ

2

В ваших условных операциях вы должны быть получить свойство элемента display и сравнить его со строкой значения свойства.

Так что вместо

if ($(this).next().css('display', 'none')) { 
    // ... 
} 

Оно должно быть:

if ($(this).next().css('display') === 'none') { 
    // ... 
} 

Updated Example

$('.answer').click(function() { 
    if ($(this).next().css('display') === 'none') { 
     $(this).next().css('display', 'block'); 
    } else if ($(this).next().css('display') === 'block') { 
     $(this).next().css('display', 'none'); 
    } 
}); 

Ваш код может быть упрощена до следующего, хотя:

Example Here

$('.answer').on('click', function() { 
    $(this).next().toggle(); 
}); 

.toggle() method обрабатывает всю эту логику.

+0

Я новичок. спасибо за '.toggle()' – user3301042

Смежные вопросы