1

申し訳ありませんが、これはまったくの質問です。JavaScript に慣れてきたばかりです。

ここにあるようなスライドダウン メニューを作成したいと思います。

http://www.impressivewebs.com/demo-files/mega-drop-downs/index.html

このメニューの問題は、ajax を使用してメニュー コンテンツを呼び出すことです。これは、1) ユーザーがアクセスしたページではなく、ajax #hashtags を介して前後に移動するため、ユーザーの前後のナビゲーションが混乱することを意味します。 2) 呼び出された各メニュー項目のコンテンツのロードに遅延があります。

ajaxを使用せずにこれと同じ効果（.slidedown）を持つ優れたjqueryメニューパッケージを知っている人はいますか? (または、ajax を使用しないようにこのメニューを変更する方法を誰かが提案できます)。

ヘルプ/提案をお寄せいただきありがとうございます。

マット

4

2 に答える 2

0

バージョン 1.9 で導入された jQuery メニューを使用できます。

http://jqueryui.com/menu/

于 2012-12-11T12:55:17.687 に答える
0

私は彼らのjsの一部をコピーしました。

// populates the menu according to what link was clicked, opens it if not already opened
populateMenu: function (currentLink) {
    dd.removeClass(pages);
    dd.addClass(currentLink + " open");
    dd.slideDown(speed, function () {
        // callback that runs after menu finishes sliding down
        $("nav ul li.menu>a.active").find("span").html(upArrow);
        // ajax call is below; it appends a timestamp to prevent caching, in case of dynamic content; remove if you like
        dd.load(dir + "/" + currentLink + ext + "?" + new Date().getTime(), function () {
            // callback that runs after menu finishes loading
            dd.removeClass("loading");
            addCloseLink();
        });
    });
    // change the hash according to the clicked link
    document.location.hash = currentLink;
},

好みの内容でdd.loadmodify文の呼び出しをjQueryなどで変更する場合は、ajaxを使わなくても構いません。dd.html(...)

関数の最後の行を削除しても、document.location.hash = currentLink;前後のナビゲーションは変更されません。

それは次のようになります。

populateMenu: function (currentLink) {
  dd.removeClass(pages);
  dd.addClass(currentLink + " open");
  dd.slideDown(speed, function () {
    // callback that runs after menu finishes sliding down
    $("nav ul li.menu>a.active").find("span").html(upArrow);
    dd.html($('#your_source_here'));
    dd.removeClass("loading");
    addCloseLink();
  });
},

編集：

折りたたみ可能なコンテンツで jQueryUI タブを使用することもできます。こちらのデモを参照してください。スタイリングが必要になりますが、以前のコードを変更するよりも少ない作業で動作するはずです。

基本的な例については、この jsFiddleを参照してください。タブのスタイリングのみを行う必要があります。

于 2012-12-11T12:21:12.380 に答える