1

Twitter ブートストラップを使用しており、メニュー項目をクリックしてモーダル ポップアップを開こうとしています。これが私のコードです：

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <ul class="nav pull-right">
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
                <ul class="dropdown-menu">
                    <li class="active"><a href="">Some item 1</a></li>
                    <li class=""><a href="">Some item 2</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#myModal" class="dropdown-toggle" data-toggle="modal">
                Contacts</a></li>
        </ul>
    </div>
    <!-- /.navbar-inner -->
</div>

そして私のモーダルウィンドウ：

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Modal header</h3>
    </div>
    <div class="modal-body">
        <p>
            One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            Close</button>
        <button class="btn btn-primary">
            Save changes</button>
    </div>
</div>

最初のメニュー項目にはドロップダウン データ切り替えがあります。2 番目のメニュー項目には、モーダル データ切り替えがあります。最初のアイテムをクリックすると、クリックされたように見え、独自の色が変わります。2 番目の (連絡先) メニュー項目をクリックすると、項目の色は変わりません。「Contacts」li 要素の onclick イベントを追加しました。

onclick="$(this).addClass('modal-open-li');"

modal-open-liこの要素をクリックするために独自のクラスを作成しています。liしかし、モーダル ポップアップ ウィンドウを閉じているときに要素の色を返すにはどうすればよいでしょうか? また、同じli要素に対して複数の data-toggle を追加できdata-toggle="modal dropdown"ますか?

4

1 に答える 1

1

私が正しく理解している場合は、モーダルが閉じられたときにリンクからクラスを削除したいので、モデルの「非表示」イベントにバインドできるようにするには、次の JavaScript コードを追加してみてください。

$('#myModal').on('hide',function(){
    $('.nav > li > a.modal-open-li').removeClass('modal-open-li');
});

要素に複数のデータ切り替えを追加することについて、それが可能かどうかはわかりませんが、ドロップダウンを切り替えて同時にモーダルを開く必要があるので、お勧めしませんか? UXを改善するためのより良い方法があると思います

于 2013-07-06T19:46:15.363 に答える