Question

我有以下ul。我在顶部有一个固定的过滤条。但是当我滚动列表视图时，过滤条是透明的，你可以看到它背后的列表视图。有什么办法让过滤条成为顶层？

<body>
    <div data-role="page" class="div1">
        <form id="wrapper1" action="DiseaseList.php" method="post" target="_blank" data-ajax="false">
            <div id="wrapper">
                <ul class="ui-li ui-bar-b ui-first-child" id="list" data-role="listview" data-filter='true' data-inset="false" data-filter-theme="b" data-filter-placeholder="Filter symptoms..." data-theme="c" data-dividertheme="a">
                    //my php code filling the listview                                                       
                    ?>
                </ul>  
            </div>
        </form>
    </div>       
</body>

这是css

#wrapper {
    padding-top : 50px;
}
#wrapper form {
    position : fixed;
    top      : 15px;
    left     : 15px;
    width    : 100%;
    z-index  : 1;
}

Answer 1

嗨Serge我有完全相同的问题。尝试用你的Z-index玩一点点。 Z-index优先考虑您的物品。因此ul链接的优先级高于搜索框，这就是向下滚动时链接出现的原因。尝试使用类似3或4的东西。它应该可以解决问题。

我为你做了一个小伙伴：

http://jsfiddle.net/matunga/hMCkr/

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-
    1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <div data-role="page">
        <div data-role="content">
            <div id="my-wrapper">
                <ul data-filter="true" data-role="listview">
                    <li><a href="#Page2">1</a>
                    </li>
                    <li><a href="#Page2">2</a>
                    </li>
                    <li><a href="#Page2">3</a>
                    </li>
                    <li><a href="#Page2">4</a>
                    </li>
                    <li><a href="#Page2">5</a>
                    </li>
                    <li><a href="#Page2">6</a>
                    </li>
                    <li><a href="#Page2">7</a>
                    </li>
                    <li><a href="#Page2">8</a>
                    </li>
                    <li><a href="#Page2">9</a>
                    </li>
                    <li><a href="#Page2">10</a>
                    </li>
                    <li><a href="#Page2">11</a>
                    </li>
                    <li><a href="#Page2">12</a>
                    </li>
                    <li><a href="#Page2">13</a>
                    </li>
                    <li><a href="#Page2">14</a>
                    </li>
                    <li><a href="#Page2">15</a>
                    </li>
                    <li><a href="#Page2">16</a>
                    </li>
                    <li><a href="#Page2">17</a>
                    </li>
                    <li><a href="#Page2">18</a>
                    </li>
                    <li><a href="#Page2">19</a>
                    </li>
                    <li><a href="#Page2">20</a>
                    </li>
                    <li><a href="#Page2">21</a>
                    </li>
                    <li><a href="#Page2">22</a>
                    </li>
                    <li><a href="#Page2">23</a>
                    </li>
                    <li><a href="#Page2">24</a>
                    </li>
                    <li><a href="#Page2">25</a>
                    </li>
                    <li><a href="#Page2">26</a>
                    </li>
                    <li><a href="#Page2">27</a>
                    </li>
                    <li><a href="#Page2">28</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    #my-wrapper {
    padding-top : 45px;
}
#my-wrapper form {
    position :fixed;
    top : 15px;
    left : 15px;
    width : 100%;
    z-index : 2;
}

亲切的问候，Matias！

固定的jquery移动数据过滤器默认是透明的

1 个答案: