2

上部にネストされたナビゲーションがあるモバイルWebサイトを構築しています。ユーザーが親のliをタップしたときに、サブナビゲーションがポップアップするようにします。これが私の問題です。最初に開いたliを含め、サブナビゲーションのその他の部分がタップされたときに閉じる必要があります。

私が試したこと：

  • およびその他のトグル：サブナビゲーションは、親liが再度タップされたときにのみ閉じます。
  • hover（）：サブナビゲーションをまったく閉じません。

私のナビゲーションがどのように見えるかのサンプル：

<ul>
    <li id="open"><a href="#">one</a>
        <nav><ul>...</ul></nav>
    </li>
    <li>...</li>
</ui>

そして、これが私が試したホバーjqueryです：

$("li#open").hover(
    function (event) { 
    event.preventDefault(); $("nav").show(); },
    function (event) { 
    event.preventDefault(); $("nav").hide(); }
);

私は自分の関数を書くのにjqueryとjavascriptに慣れていませんが、「nav」以外は「nav」を隠すというものを書く方法が必要です。どんな助けでも大歓迎です！

4

1 に答える 1

0

私はこのようなことをします

$("li#open").click(function (event) { 
    // prevent default
    event.preventDefault();
    // if #open has class active, then remove it if not then add it
    if($(this).hasClass("active")) {
        $(this).removeClass("active");
    }
    else {
        $(this).addClass("active");
    }
);

$(document).click(function() {
    // if #open has class active then remove it
});

アクティブなクラスはメニューを表示しているはずであり、メニューはデフォルトで何も表示されません。このようにアクティブなクラスを追加すると、メニューに次のように表示されます

複数の項目がある場合、これは1つのメニュー項目で機能し、コードを少し変更する必要があります。これがiOS専用の場合は、クリックの代わりにタッチスタートとタッチエンドを使用できます

$("li#open").live('touchstart', function (event) { // function content }

タッチスタートは、画面に触れるとトリガーされ、指が画面から離れると、タッチエンドがトリガーされます

于 2012-06-07T18:34:46.410 に答える