下拉菜单闪烁并消失仅在移动设备上

时间:2018-09-08 01:58:01

标签: javascript html css

我在服务导航项下的导航栏中有一个子菜单。

预期行为是在单击“服务”后出现的子菜单。 实际的行为是:单击“服务”后,子菜单会闪烁并消失。

  <nav id="main-menu">
                    <ul class="sf-navbar">
                        <li>
                            <a href="#home">
                                <div data-i18n="nav.home">Home</div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div data-i18n="nav.services.title">Title</div>
                            </a>

                            <ul>
                                <li>
                                    <a href="#service">
                                        <div data-i18n="nav.services.ourservices">Our Services</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#how">
                                        <div data-i18n="nav.services.howwework">How We Work</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#areascontainer">
                                        <div data-i18n="servicearea.title">Service Area</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#why">
                                        <div data-i18n="why.title">Why Choose Us</div>
                                    </a>
                                </li>
                            </ul>
                        </li>
.....
</nav>

JS代码:     wei.header = {

        init: function(){

            wei.header.superfish();

        },             

        superfish: function() {

            $( main_menu ).superfish({

                popUpSelector   : 'ul',
                delay   : 250,
                speed   : 350
            });

        },

...

我尝试调试它,但是不知道从哪里开始。请帮忙。

这是我正在处理的代码。 http://weistudio.com.au/

1 个答案:

答案 0 :(得分:1)

由于某些原因,SuperFish在touchEnd事件中仅在页面顶部显示时菜单失败(仅当您滚动页面时有效-该菜单的副本),此操作失败。

为防止这种情况,您可以使用类似<a href="#" onTouchEnd="(function (e) {e.preventDefault()})(event)">的名称。 或将其移至外部方法并像这样使用(就像您已经使用jQuery一样):

$('.header-container').on('touchend', '.sf-with-ul', function (e) {e.preventDefault()})