导航按钮突出显示在桌面浏览器中有效，但在 android 移动浏览器中无效

Question

好的，所以我正在使用 jQueryMobile、jQuery/JavaScript 和 CSS 制作一个导航栏允许您 select 来自顶部 UL 树（水平导航栏）的选项，然后 select 来自结果子菜单的选项，同时来自父 ul 树的选项仍然突出显示。

这在桌面浏览器中有效，在我刚刚创建的这个 jsfiddle 中（在底部）；然而，一旦我在移动浏览器中（Android 互联网或 Chrome 移动），父 ul 不再保持突出显示。

为什么？

<div data-role="page" data-theme="a" id="home">


    <div data-role="header" data-position="fixed">
        <nav id="navbar" data-role="navbar">
            <ul>
                <li class="active"><a class="ui-btn-active" href="#">Real-Time</a>
                    <ul class="secondLvl">
                        <li><a href="#">Choice 1</a></li>
                        <li><a href="#">Choice 2</a></li>
                        <li><a href="#">Choice 3</a></li>
                        <li class="lastNav"><a></a></li>
                    </ul>
                </li>
                <li><a href="#" class="pageChange">Database Functions</a>
                    <ul class="secondLvl">
                        <li><a href="#">Another Choice 1</a></li>
                        <li><a href="#">Another Choice 2</a></li>
                        <li class="lastNav"><a></a></li>
                    </ul>
                </li>
                <li><a href="#" class="pageChange">Settings/Configuration</a>
                    <ul class="secondLvl">
                        <li><a href="login.php">Logout</a></li>
                        <li><a href="#">A Third Choice 1</a></li>
                        <li><a href="#">A Third Choice 2</a></li>
                        <li><a href="#">A Third Choice 3</a></li>
                        <li class="lastNav"><a></a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>

    <div data-role="main" class="ui-content">

    </div>

    <div data-role="footer" data-position="fixed">
        <h1>
            Home
        </h1>
    </div>

</div>

CSS:

#home
{
    background-color: #5f6975;
    overflow: hidden;
}

#navbar > ul {
    position: relative;
}

#navbar ul ul {
    display: none;
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
    left: 0;
    width: auto;
    bottom: 1000px;
}

#navbar ul ul li {
    float: left;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
    width: 100%;
}

.ui-navbar li:last-child .ui-btn {
    margin-right: 0px !important;
}

.lastNav a {
    height: 100vh;
    pointer-events: none;
}
        #navbar ul ul li a.active {
            background: #4b545f;
        }

    #navbar ul ul ul {
        position: absolute; 
        left: 100%; 
        top: 0;
    }

#navbar ul li.active > ul { 
            display: block;
}

#navbar ul li { 
    float: left;
}

    #navbar ul li.active {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }

#navbar ul li a {
    display:block; 
    padding: 25px 40px; 
    text-decoration: none;
}

JavaScript/JQuery:

//Clear Text Fields
$(document).on("pagehide", function (e){
    $(e.target).remove();
});

//Setup Side Navbar
$(document).on("pagecreate", "#home", function(){
    var navItems = $("#navbar > ul > li");
    var subWidth = 100 / navItems.length;

    $("#navbar > ul > li").each(function( index ) {
        $(this).find("ul").each(function(i) {
            var top = (i + 1) * 100;
            $(this).css({"position": "absolute", 
                         "width": subWidth + "%",
                         "top": top + "%"}); 
        });
    });
});

//Make Side Navbar stick
$(document).on('pagebeforeshow','#home', function(event){
    $('#navbar ul li').on('click', function () {

        //removing the previous selected menu state
        $('#navbar ul li.active').removeClass('active');

        //is this element from the second level menu?
        if($(this).closest('ul').hasClass('secondLvl'))
        {
            $(this).parents('li').addClass('active');
        } //end if

        //otherwise just highlight the element
        else
        {
            $(this).addClass('active');
        } //end else
    })  

    $('ul').find('a').on('click', function() {

        $(this).closest('ul').find('a').removeClass('ui-btn-active');

        if($(this).closest('ul').hasClass('secondLvl'))
        {
            $(this).addClass('ui-btn-active');
        }
    })
})

这是我的 JSFiddle：https://jsfiddle.net/LLx7vgjo/8/

Answer 1

尝试使用 vclick 事件代替点击。 jQuery Mobile "vclick" 事件处理程序模拟移动设备上的 "onclick" 事件处理程序。希望对您有所帮助！

导航按钮突出显示在桌面浏览器中有效，但在 android 移动浏览器中无效

Nav button highlight works in desktop browser, but not in android mobile browser

javascript

html

css

jquery-mobile

nav