1

我使用魅力模板开发 Web App。但是，子菜单无法在手机上打开。

这是hmtl代码：

<li class="accordion">
     <a href="#"><i class="icon-tasks"></i><span class="hidden-tablet"> Manage Task</span></a>
        <ul class="nav nav-pills nav-stacked">
            <li>
             <a class="ajax-link" href="<?php echo $this->Html->url(array('controller' => 'Tasks', 'action' => 'index/1')); ?>"><i
                                            class="icon-list-alt"></i>
                <span class="hidden-tablet">My Assigned Tasks</span>
             </a>
             </li>
             <li>
             <a class="ajax-link" href="<?php echo $this->Html->url(array('controller' => 'Tasks', 'action' => 'index/2')); ?>"><i
                                                class="icon-list-alt"></i>
               <span class="hidden-tablet">My All Tasks</span>
             </a>
              </li>

    <li>
         <a class="ajax-link" href="<?php echo $this->Html->url(array('controller' => 'Calendars', 'action' => 'index')); ?>"><i
                                            class="icon-list-alt"></i>
        <span class="hidden-tablet"> Assign Tasks</span>
        </a>
        </li>
</ul>

这是js代码：

$('.accordion > a').click(function (e) {
        e.preventDefault();
        var $ul = $(this).siblings('ul');
        var $li = $(this).parent();
        if ($ul.is(':visible')) $li.removeClass('active');
        else                    $li.addClass('active');
        $ul.slideToggle();
    });

    $('.accordion li.active:first').parents('ul').slideDown();

我认为 e.preventDefault() 在移动设备上不起作用，所以当点击标签时它仍然呈现并且不显示子菜单。

请帮我解决这个问题。谢谢。

4

2 回答 2

1

尝试将click和touchstart事件绑定在一起，如下所示：

$('selector').on('click touchstart', function(e)
{
     e.preventDefault();
});

或者你可以实现一个帮助脚本，比如Touche.js

将您的点击事件与 jQuery 一起应用，并静默地将它们重新映射到支持触摸的设备的“touchend”事件。

于 2014-12-10T07:49:46.657 回答
0

对我来说更好的解决方案是使用点击和点击事件

    $('selector').on('click tap', function(e)
{
     e.preventDefault();
});

如果您使用touchstart，则无法滚动此链接

于 2018-01-26T09:57:47.247 回答