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

Jquery display:none, display: inline-block

本文关键字：显示 Jquery      更新时间：2023-09-26

我必须将元素从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

if语句错误，

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

如果要将css属性分配给if语句中的show元素，请改用.is(':visible')。

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

更新if()以使用is(':visible')函数：

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

jsFiddle演示

与许多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);
相关文章：