else if子句没有按预期工作

时间:2015-02-28 00:16:28

标签: javascript jquery css

我想要一个开合功能。如果<div>打开,它应该在我点击它时关闭,当我再次点击它时它应该重新打开。 JSFiddle

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

在此示例中,“if”子句正在工作(它打开),但“else if”不起作用(它不会再次关闭)。

1 个答案:

答案 0 :(得分: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处理所有这些逻辑。