关于MUI框架中,"侧滑导航"之"div模式下拉菜单"的a标签(超链接)的失效问题?

关于MUI框架中,”侧滑导航”之”div模式下拉菜单”的a标签(超链接)的失效问题?

截图和讲解图片的顺序如下所示:


图1

关于MUI框架中,


图2 · 官方的截图

关于MUI框架中,


图3 · 官方的截图

关于MUI框架中,


图4 · 官方的截图

关于MUI框架中,


图5 · 自定义模板的截图

关于MUI框架中,


主要HTML、JS代码示下:


<p>···部分代码省略···p>

<div id="menu-wrapper" class="menu-wrapper hidden">
        <div id="menu" class="menu">
            <ul id="tags-ul" class="mui-table-view mui-table-view-inverted">
                <li class="mui-table-view-cell">
                    <a href="http://www.baidu.com">商品不限a>
                li>
                <li class="mui-table-view-cell">
                    <a href="http://www.taobao.com">Item 1a>
                li>
                <li class="mui-table-view-cell">
                    <a href="http://www.iqiyi.com">Item 2a>
                li>
                <li class="mui-table-view-cell">
                    <a href="javascript:;">Item 3a>
                li>
                <li class="mui-table-view-cell">
                    <a href="javascript:;">Item 4a>
                li>
                <li class="mui-table-view-cell">
                    <a href="javascript:;">Item 5a>
                li>
                <li class="mui-table-view-cell">
                    <a href="javascript:;">Item 6a>
                li>
            ul>
        div>
    div>
    <div id="menu-backdrop" class="menu-backdrop">div>
    <script src="statics/js/tpmall_js/mui.min.js">script>
    <script>
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });
        var menuWrapper = document.getElementById("menu-wrapper");
        var menu = document.getElementById("menu");
        var menuWrapperClassList = menuWrapper.classList;
        var backdrop = document.getElementById("menu-backdrop");
        var info = document.getElementById("info");

        backdrop.addEventListener('tap', toggleMenu);
        document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
        /*document.getElementById("icon-menu").addEventListener('tap',toggleMenu)*/
        //下沉菜单中的点击事件
        mui('#menu').on('tap', 'a', function() {
            toggleMenu();
            info.innerHTML = '你已选择:'+this.innerHTML;
        });
        var busying = false;

        function toggleMenu() {
            if (busying) {
                alert("001");
                return;
            }
            busying = true;
            if (menuWrapperClassList.contains('mui-active')) {
                document.body.classList.remove('menu-open');
                menuWrapper.className = 'menu-wrapper fade-out-up animated';
                menu.className = 'menu bounce-out-up animated';
                setTimeout(function() {
                    backdrop.style.opacity = 0;
                    menuWrapper.classList.add('hidden');
                }, 500);
                alert("002");
            } else {
                document.body.classList.add('menu-open');
                menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
                menu.className = 'menu bounce-in-down animated';
                backdrop.style.opacity = 1;
                alert("003");
            }
            setTimeout(function() {
                busying = false;
            }, 500);
        }
    script>
body>

html>

图5 · 主要 JS 代码示下:

//下沉菜单中的点击事件
mui('#menu').on('tap', 'a', function() {
    toggleMenu();
    info.innerHTML = '你已选择:'+this.innerHTML;
});

针对上面提及的点击下沉菜单中的a标签链接跳转的失效问题,现提出以下建议或意见。

最后,解决办法: “直接注释掉影响的代码”

将上述代码直接注释,这样的话,就不会影响点击的效果了。
只能算是权宜之计,暂时未深入研究,欢迎评论留言和建议。

希望上述问题描述能有效解决你的问题,或有所帮助和指引。


以上就是关于“ MUI框架中,”侧滑导航”之”div模式下拉菜单”的a标签(超链接)的失效问题? ” 的全部内容。

你可能感兴趣的:(HTML,5,MUI,JavaScript,MUI踩坑篇)