Question

我必须设置从display: none到display: inline-block的元素点击另一个元素时。

Jquery始终检测到它display: none

(function ($) {
    $(document).ready(function() {
        $("#click").click(function () {
            if($("#show").css('display','none')) {
                $('#show').css('display','inline-block');
            } else {
                $('#show').css('display','none');
            }
        });
    });
})(jQuery);

#show {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">
    Click
</div>
<div id="show">
    Text
</div>

Fiddle

Answer 1

if声明错误，

if($("#show").css('display','none'))

您要将css属性分配到show语句中的if元素，而是使用.is(':visible')。

if(!$("#show").is(':visible'))

Answer 2

更新if()以使用is(':visible')功能：

var displayType = ( ! $("#show").is(':visible') ) ? 'inline-block' 
                                                  : 'none';

$('#show').css('display', displayType);

jsFiddle Demo

Answer 3

与许多jQuery函数一样，css根据您传递的参数有两种不同的行为。

如果只传递第一个参数（css属性），则返回css属性的值。

如果传递css属性和值，它会设置值并返回实际的jQuery对象。

试试这个：

(function ($) {
    $(document).ready(function() {
    $("#click").click(function () {
        //Get the div in jquery object.
        var div = $("#show");
        //Determine the actual value of the display.
        var display = div.css('display');

        //Determine the desired value.
        if (display == 'none')
            display = 'inline-block';
        else
            display = 'none';

        //Change the value
        div.css('display', display);

        });
    });
})(jQuery);

Jquery显示：无，显示：内联块

3 个答案: