0

しばらく前に作成した Web サイトに Foundation 3 を使用しており、ドロップダウン ボタンを使用しています。すべて問題ありませんが、フォームといくつかのボタンを Ajax 経由でロードする必要があります。Ajax 経由で入ってきたボタンは機能しません (開かないだけです)。これまでのところ、解決策を見つけることができませんでした。私も電話してみました：

  $(document).foundationButtons();

また

  $(mySelector).foundationButtons();

Ajax呼び出しが完了した後、どちらもページ全体のすべてのドロップダウンボタンを壊します。助けてください。

ありがとう。

これは、Ajax 経由で読み込んでいるコードです。

 <div href="#" class="button dropdown">
     Edit
     <ul>
         <li><a href="#" class="internal">Internal Data</a></li>
         <li><a href="#" class="external">External Data</a></li>
         <li class="divider"></li>
         <li><a href="#" class="settings">Settings</a></li>
     </ul>
 </div>

呼び出しは、通常の jQuery $.ajax(); を経由しています。ルーティーン。ここでの問題は、ドロップダウン ボタンが Ajax 経由でページに挿入された後、Foundation によってレンダリングされないことです。

4

2 に答える 2

0

この質問をしてからしばらく経ちましたが、自分で理解しました。ドロップダウン ボタンは、Ajax 経由でページに挿入された後は機能しません。この問題を処理する jQuery プラグインを作成しました。

$.fn.prettyButtons = function(){
    $('.button.dropdown > ul').addClass('no-hover');
    var u = $(".button.dropdown:not(.large):not(.small):not(.tiny):visible", this).outerHeight() - 1,
            a = $(".button.large.dropdown:visible", this).outerHeight() - 1,
            f = $(".button.small.dropdown:visible", this).outerHeight() - 1,
            l = $(".button.tiny.dropdown:visible", this).outerHeight() - 1;
   $(".button.dropdown:not(.large):not(.small):not(.tiny) > ul", this)
   .css("top", u), $(".button.dropdown.large > ul", this)
   .css("top", a), $(".button.dropdown.small > ul", this).css("top", f),   
   $(".button.dropdown.tiny > ul", this).css("top", l), 
   $(".button.dropdown.up:not(.large):not(.small):not(.tiny) > ul", this)
   .css("top", "auto")
   .css("bottom", u - 2), $(".button.dropdown.up.large > ul", this)
   .css("top", "auto")
   .css("bottom", a - 2), $(".button.dropdown.up.small > ul", this)
   .css("top", "auto")
   .css("bottom", f - 2), $(".button.dropdown.up.tiny > ul", this)
   .css("top", "auto")
   .css("bottom", l - 2);
}

これは、Foundation が実行するすべてのステップを単純に繰り返して、オンデマンドでボタンを作成します。使い方は簡単です:

$('.selector').prettyButtons();

誰かがこの問題に遭遇した場合に備えて。

于 2013-08-25T11:16:55.597 に答える
0

同様の問題に遭遇した人のために、私は以下で解決することができました...

https://github.com/zurb/foundation/issues/4587

$('#elementId').foundation('ドロップダウン', 'リフロー'); <-- html の作成後にこれを追加しました。

実際のドロップダウン リンクではなく、コンテナーに適用する必要があることに注意してください。

于 2014-08-02T08:11:25.390 に答える