2

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

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

这是我的 HTML：

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

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

4

2 回答 2

3

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

演示：使用.hide()/.show()。

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

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

解释

  • .closest()：它从当前元素开始，向上遍历DOM 树，直到找到与提供的选择器匹配的内容。返回的 jQuery 对象包含原始集合中每个元素的零个或一个元素，按文档顺序排列。

  • .parents()：它从父元素开始，沿着 DOM 树向上移动到文档的根元素，将每个祖先元素添加到临时集合中；然后，如果提供了选择器，它会根据选择器过滤该集合。返回的 jQuery 对象包含原始集合中每个元素的零个或多个元素，以相反的文档顺序排列。

推荐

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

鉴于上述情况，不要使用.hide()/ .show()，而是创建一个自定义类：

.hide {
  display: none !important;
 }

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

于 2013-06-27T13:19:11.767 回答
-1

将您的代码更改为：

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

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

$(document).ready(function(){
  $("#searchuniversitycampus").show();
});
于 2013-06-27T12:47:15.893 回答