javascript - 使用 if 语句检查元素是否显示:block jquery
问题描述
我正在尝试检查一个元素是否是显示块,如果是,那么我想执行一些代码。下面是我的代码,它是一个很大的函数,但我试图检查一个 div 是否是显示块在底部,如果它是显示块,那么我想执行 blur 方法。正如您在底部附近看到的那样,我开始写作 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
解决方案
您可以创建一个辅助方法来检查 display 是否是块:
function checkDisplay(element) {
return $(element).css('display') == 'block';
}
然后你可以像这样检查它:
if(checkDisplay("#myElement")){
console.log("Display is Block")
}
else {
console.log("Display is NOT Block")
}
推荐阅读
- javascript - 在JS中将字符串转换为函数
- c# - 使用 mvvm 在 WPF 数据网格中的行单击事件
- c# - C# 字符串数组元素不更新
- java - 如何在 hql 请求中正确调用枚举方法?numberClass 和 symbolClass 是一个枚举
- java - 在 Java 中生成 XML 有效负载的最有效方法
- java - Android ListAdapter.getItemCount() 总是返回 0
- javascript - 获取用户在 EJS 中选择的表详细信息?
- javascript - cookie 何时被视为第三方 cookie?
- sql - 编写查询以查找从 10 月到 11 月因购买而产生的收入变化
- r - Datatable 显示 empy selectInput 而默认选择值