Question

我有几个jquery-mobile页面和一个充当侧边菜单的全局面板。当面板出现时，我需要突出显示列表项，以指示当前活动的页面。

演示页面位于： https://jsfiddle.net/pengyanb/btm7es4m/7/

我尝试将'ui-btn-active'类添加到'li'元素（'li'元素不包含任何'a'子元素），似乎没有效果。是否有一个类可以应用于listview的'li'元素以实现高亮效果？提前谢谢。

$('#globalPanel').panel().enhanceWithin();

$('#gotoPage1').unbind().click(function(){
    $.mobile.changePage("#page1", {transition: "flip"});
});
$('#gotoPage2').unbind().click(function(){
    $.mobile.changePage("#page2", {transition: "flip"});
});

$('#globalPanel').off().on('panelbeforeopen', function(event, ui){
    $('#globalPanel').find('li').removeClass('ui-btn-active');
    if($.mobile.activePage.attr('id') === 'page1')
    {
        console.log("Trying to highlight Panel item1");
        $('#gotoPage1').addClass('ui-btn-active');
    }
    else if($.mobile.activePage.attr('id') === 'page2')
    {
        console.log("Trying to highlight Panel item2");
        $('#gotoPage2').addClass('ui-btn-active');
    }
    $('#globalPanel').find('ul').listview('refresh');
});

<!--Page 1-->
<div data-role="page" id="page1" data-theme="a">
            <!--header-->
            <div data-role="header" data-position="fixed">
                <a href="#globalPanel" class="ui-btn ui-btn-left ui-icon-bars ui-btn-icon-notext ui-corner-all"></a>
                <h5>Page 1</h5>
            </div>
            <!--content-->
            <div data-role="main" class="ui-content">
            </div>
</div>
<!--Page 2-->
 <div data-role="page" id="page2" data-theme="a">
            <!--header-->
            <div data-role="header" data-position="fixed">
                <a href="#globalPanel" class="ui-btn ui-btn-left ui-icon-bars ui-btn-icon-notext ui-corner-all"></a>
                <h5>Page 2</h5>
            </div>
            <!--content-->
            <div data-role="main" class="ui-content">
            </div>
</div>

<!--Global Panel-->
<div data-role="panel" id="globalPanel" data-transition="reveal" data-position-fixed="true" data-position="left" data-theme="b">
    <ul data-role="listview" data-inset="false" data-corners="false">
        <li id="gotoPage1">Page 1</li>
        <li id="gotoPage2">Page 2</li>
    </ul>
</div>

Answer 1

默认情况下，ui-btn-active不适用于普通<li>元素。所以你可以添加这个CSS：

li.ui-btn-active {
    background-color:       #22aadd !important;
    border-color:           #22aadd !important;
    color:                  #fff !important;
    text-shadow: 0 0 #0088bb !important;
}

更新了 FIDDLE

jQuery Mobile listview尝试通过应用'ui-btn-active'类不起作用来突出显示所选项目。是否有“选定”课程

1 个答案: