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

Question

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

预期的行为是一旦服务被点击，子菜单就会出现。实际的行为是:单击服务后，子菜单闪烁并消失。

  <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/

Answer 1

出于某种原因，SuperFish 在 touchEnd 上失败了事件并且仅适用于当您位于页面最顶部时显示的菜单(如果您稍微滚动页面它会起作用 - 这个菜单有一个克隆)。

为了防止它，你可以使用类似 <a href="#" onTouchEnd="(function (e) {e.preventDefault()})(event)"> 的东西. 或者将其移至外部方法并像这样使用(因为您已经在使用 jQuery):

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