1

ブートストラップを使用してレスポンシブ Web サイトを作成しています。新しいシナリオに出くわしましたが、それを解決する方法がわかりません。次のhtmlコードがあります。

        <!-- button color depending on desktop vs. phone -->
        <button class="btn visible-desktop" id="modifyVLANS">Modify VLANS</button>
        <button class="btn hidden-desktop lsm-visible-phone btn-warning" id="modifyVLANS">Modify VLANS</button>

後で、次のjqueryがあります：

    //show list
    $('#modifyVLANS').click(function()  {
            do something....

ただし、同じ名前のボタンが 2 つあるため、モバイル デバイスでは onclick イベントが発生しません。別々のイベント ハンドラを持つ 2 つの別々のボタンを作成したくありません。コードがまったく同じになるからです。どうすればこの問題を回避できますか?

ありがとう。

4

1 に答える 1

1

デバイスに応じてボタンを非表示にする代わりに、フォーム全体を非表示にします。<input type="search">モバイル用のスタイルとデスクトップ用のスタイルを実装しようとしたときに、同じ問題が発生しました。

次に、イベント ハンドラーをclassではなくボタンidに関連付けます。これは、ビューによってボタンの 1 つが非表示になっている場合でも、 per pageを持つ要素は 1 つしか持てないためidです。

ここに簡単なフィドルがあります。

于 2013-03-27T18:12:16.747 に答える