jQuery顯示：無，顯示：內聯塊

Question

我必須從display: none設置一個元素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> 

小提琴

Answer 1

if語句錯誤，

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

您正在為if語句中的show元素分配css屬性，請改用.is(':visible') 。

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

Answer 2

更新您的if()以使用is(':visible')函數：

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

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

jsFiddle演示

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