1

カリスマ テンプレートを使用して Web アプリを開発しています。ただし、モバイルではサブメニューを開くことができません。

これは 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

次のように、クリックイベントとタッチスタートイベントを一緒にバインドしてみてください。

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

または、 Touche.jsなどのヘルパー スクリプトを実装することもできます。

jQuery で適用されたクリック イベントを取得し、タッチをサポートするデバイスの「touchend」イベントにサイレントに再マップします。

于 2014-12-10T07:49:46.657 に答える