Question

我在jQuery Mobile中试验嵌套列表视图。在下面的代码中，我有三个列表元素，所有列表元素都包含一个＆＃39; .sub-list＆＃39;元素与＆＃39;显示：无＆＃39;。＆＃39; .sub-list＆＃39;的前提。 elemnt导致两个奇怪的行为。

＆＃39;子列表＆＃39;的先例元素导致＆＃39; #main-list＆＃39;要进行css格式化，即列表元素在颜色上有渐变，当你鼠标悬停在它上面时也会改变颜色。
＆＃39; .sub-list＆＃39;的先例。元素导致＆＃39; .main-list-element＆＃39;列出要使用＆＃39; .main-list-element＆＃39;链接到新页面的元素。页面顶部的文字。谁能告诉我为什么会发生这种情况以及如何预防呢？

请注意我已尝试使用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

更新

这是jQuery Mobile 1.4中的官方demo of creating a Nested Listview。

这称为 Nested Listview ，自最新稳定版本（1.3）起已弃用，将在版本（1.4）中删除。

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

1 个答案:

更新