jQuery Mobile嵌套列表视图中的奇怪行为

Question

I'm experimenting with nesting listviews in jQuery Mobile. 我正在尝试在jQuery Mobile中嵌套列表视图。 In the code below I have three list elements all of which contain a '.sub-list' element with 'display:none'. 在下面的代码中，我有三个列表元素，所有这些元素都包含一个带有“ display：none”的“ .sub-list”元素。 The prescence of the '.sub-list' elemnt cause two odd behaviors. '.sub-list'元素的出现导致两种奇怪的行为。

The precence of the 'sub-list' elements causes '#main-list' to be css formatted, ie the list elements have a gradient on the color and when you mouse over it changes color as well. 'sub-list'元素的出现会导致'＃main-list'被css格式化，即list元素在颜色上具有渐变，当您将鼠标悬停在其上时，它也会更改颜色。
The precence of the '.sub-list' elements cause the '.main-list-element' list elements to link to a new page with the '.main-list-element' text at the top of the page. “ .sub-list”元素的出现会导致“ .main-list-element”列表元素链接到新页面，并在页面顶部显示“ .main-list-element”文本。 Can anyone tell me why this is happening and how to prevent it? 谁能告诉我为什么会这样以及如何预防呢？

Please note I have experimented with jQuery Mobile collapsable content and have ruled out using it. 请注意，我已经尝试使用jQuery Mobile可折叠内容，并且已排除使用它。

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
</head>
<body>
 <div data-role="page" id="date-page" class="type-interior" style="width:100%">
<ul id='mainlist' data-role="listview" class='list-element'>
<li class='main-list-element'>test 1<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
<li class='main-list-element'>test 2<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
<li class='main-list-element'>test 3<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
</ul>
</div>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
      <script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
      <script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
<script>
   $('.list-element').click(function(){
   alert("hi");
   });
</script>
</body>
</html>

Answer 1

Update: 更新：

Here is an official demo of creating a Nested Listview in jQuery Mobile 1.4. 这是在jQuery Mobile 1.4 中创建嵌套Listview的官方演示。

This is called Nested Listview which is deprecated as of latest stable version (1.3) and will be removed in version (1.4). 这称为嵌套列表视图 ，自最新稳定版本（1.3）起已弃用，并将在版本（1.4）中删除。

jQuery Mobile嵌套列表视图中的奇怪行为

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-09-17 22:22:27

Update: 更新：

jQuery Mobile嵌套列表视图中的奇怪行为

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-09-17 22:22:27

Update: 更新：

解决方案1
3 已采纳 2013-09-17 22:22:27