Question

我只是尝试在页面加载之前隐藏select元素。这是我的Javascript / jQuery：

$(document).on('pagebeforeshow','#searchpage', function() {
    $("#searchuniversitycampus").empty();
    $("#searchuniversitycampus").hide();        
});

这是我的HTML：

<select name="searchuniversitycampus" id="searchuniversitycampus" ></select>

我不确定为什么在加载页面时仍会显示该元素。

Answer 1

jQuery Mobile使用带有select类的div包装ui-select。您需要使用.closest()来定位该div并隐藏/显示它。

Demo ：使用.hide() / .show()。

Demo ：使用自定义类和.toggleClass() - 推荐。

$("#searchuniversitycampus").closest('div.ui-select').hide();

说明

.closest()：它以当前元素开头，沿DOM树向上移动，直到找到所提供选择器的匹配项。返回的jQuery对象包含原始集中每个元素的零个或一个元素，按文档顺序。
.parents()：它以父元素开头，然后将DOM树传递到文档的根元素，将每个祖先元素添加到临时集合中;然后，如果提供了一个选择器，它会根据选择器过滤该集合。返回的jQuery对象包含原始集中每个元素的零个或多个元素，以反向文档顺序。

建议

对于jQuery Mobile，建议添加/删除自定义类，而不是使用内联样式。使用.hide() / .show()将样式属性添加到元素display: none; / display: block;，这可能会导致与jQuery Mobile CSS中具有display: block;的元素冲突。

根据上述情况，不要使用.hide() / .show()，而是制作自定义类：

.hide {
  display: none !important;
 }

并将其与.toggleClass()或.addClass() / .removeClass()一起使用。

Answer 2

将您的代码更改为：

$(function(){
  $("#searchuniversitycampus").empty();
  $("#searchuniversitycampus").hide();
});

我希望我能正确理解你的问题。您想在页面加载时隐藏它。如果您只是试图隐藏它，直到文档完全加载，然后想要显示它，将其添加到上面：

$(document).ready(function(){
  $("#searchuniversitycampus").show();
});

.hide（）方法不起作用

2 个答案:

说明

建议