Question

好吧，我正在使用 jQueryMobile，jQuery / JavaScript 和 CSS 制作一个导航栏，允许您从顶级UL树中选择一个选项（水平导航栏）然后还从结果子菜单中选择一个选项，同时仍然突出显示父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＆＃34; vclick＆＃34;事件处理程序模拟＆＃34; onclick＆＃34;移动设备上的事件处理程序我希望这有帮助！

导航按钮突出显示适用于桌面浏览器，但不适用于Android移动浏览器

1 个答案: