Question

我试图检查一个元素是否是显示块，如果是，那么我想执行一些代码。下面是我的代码，它是一个很大的功能，但我试图检查div是否显示块在底部，如果它是显示块，那么我想执行模糊方法。正如你可以看到底部附近，我开始写if ($suggestionsWrapper ===，我的意图是写如果建议包装器显示无，然后执行此操作。我只是无法弄清楚如何执行此操作，我所写的内容并不起作用。此外，我是所有这一切的新手，如果这真的很乱或没有意义，仍然非常学习，那我很抱歉。

 //Header Search Handler
    function headerSearchHandler(){
        var $searchInput = $(".header-search input[type=text]"),
            $searchSubmit = $(".header-search input[type=submit]"),
            $mobSearchBtn = $(".mobile-search-btn"),
            $myAccountText = $(".menu-utility-user .account-text"),
            $miniCart = $("#header #mini-cart"),
            $searchForm = $(".header-search form"),
            $headerPromo = $(".header-promo-area");
            $suggestionsWrapper = $('#suggestions-wrapper');

//        
        $mobSearchBtn.on("click touchend", function(e) {

            $(this).hide();
            //$myAccountText.hide();
            $searchInput.show();
            $searchInput.addClass('grey-line');
            $searchSubmit.show();
            $miniCart.addClass("search-open");
            $searchForm.addClass("search-open");
            setTimeout(function() {
                $searchInput.addClass("active").focus();
            }, 100);
            e.stopPropogation();

        });

        $searchInput.on("click touchend", function(e) {
             $searchInput.addClass('grey-line');
             e.stopPropogation();

        }).blur(function(e) {
            var $this = $(this);

            if($this.hasClass("active")){
                $this.removeClass("active");
                $searchSubmit.hide();
                $mobSearchBtn.show();
                $miniCart.removeClass("search-open");
                $searchForm.removeClass("search-open");
            }
        });
        $searchInput.focus(function(e){
            $(this).css('width', '145px');
        })
       if ($suggestionsWrapper.css('display') == 'none') {
        $searchInput.blur(function(e){
            $(this).removeClass('grey-line');
            $(this).css('width', '145px');  
        }
    })
    }//End Header Search Handler

Answer 1

您可以创建一个辅助方法来检查显示是否为阻止：

function checkDisplay(element) {
  return $(element).css('display') == 'block';
}

然后你可以检查它：

 if(checkDisplay("#myElement")){
   console.log("Display is Block")
 }
 else {
   console.log("Display is NOT Block")
 }

这是一个例子：https://jsfiddle.net/fafgqv7v/

Answer 2

我认为你可以这样做：

if ($suggestionsWrapper.css('display') == 'block')
{
   // true
} else {
   // false
}

根据您的代码，我认为您有})错误，应该是：

if ($suggestionsWrapper.css('display') == 'none') {
        $searchInput.blur(function(e){
            $(this).removeClass('grey-line');
            $(this).css('width', '145px');  
        })
}

我希望这有帮助！

使用if语句来检查元素是否显示：block jquery

2 个答案: