2

ブートストラップ トグル ボタン (ON-OFF) を使用したいのですが、ここに私の html コードを示します。

<div class="control-group">
    <label class="control-label">Filtrar por Tipo de Usuario?</label>
    <div class="controls">
        <div class="basic-toggle-button">
            <input type="checkbox" class="toggle" checked="checked" id="test"/>
        </div>
    </div>
    <div id="content" class="hide">
        <p>testing</p>
    </div>
</div>

ボタン用のプラグインもあります（完全にはわかりません）

私が達成したいのは、オン/オフボタンを押したときにコンテンツを表示または非表示にすることです

これまでのところ、私はこのスクリプトを持っています:

var FormComponents = function () {

    $('.hide').hide();

        $('#test').click(function(){
            $('#content').toggle();
        });

    var handleToggleButtons = function () {
        if (!jQuery().toggleButtons) {
            return;
        }
        $('.basic-toggle-button').toggleButtons();
    }

    return {
        //main function to initiate the module
        init: function () {
            handleToggleButtons();
        }
    };
}();

これで完璧なオン/オフボタンができました。問題は、ボタンを押すと「表示/非表示」機能を統合してコンテンツを表示する方法がわからないことです。

これまでのところ、調査を行ったところ、これがより適切であることがわかりました。

非表示/表示機能の例

コンテンツを表示および非表示にするためにこれをまとめようとしていますが、機能させることができません。プラグインまたはスクリプト ファイルを編集する必要がありますか? どうすればそれを機能させることができますか?

4

3 に答える 3

1 
<div class="control-group">
    <label class="control-label">Filtrar por Tipo de Usuario?</label>
    <div class="controls">
        <div class="basic-toggle-button">
            <input type="checkbox" class="toggle" checked="checked" id="option" />
        </div>
    </div>
    <div id="hidden_content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

あなたのCSSで：

#hidden_content { display: none;}

あなたのJAVASCRIPTで：

$('#option').click(function(){
    //var val = $(this).val();
    $('#hidden_content').slideToggle();
});

デモを見る

于 2013-10-18T01:13:43.650 に答える