2

ブートストラップとデータ切り替えを使用して開く非表示の div がいくつかあります。複数の非表示の div を表示することはできないため、1 つを開いたときに他の div を閉じます。

これは私が試した jQuery ですが、#add-alert-box を閉じてもアラートが表示されません。私はjsfiddleでデモを持っていますこれは可能ですか、それともデータ属性ではなくjQueryを使用して各隠しdivをアクティブにする必要がありますか?

jQuery(document).ready(function ($) {

    $("#add-alert-box").collapse({
        toggle: false
    })

    $('#add-alert-box').on('hide', function () {
        alert('test');
        console.log('test');
    })

});
4

3 に答える 3

0

基本的なデモとスタイルを確認し、必要に応じて色を付けることができます。

http://jsfiddle.net/76MbN/4/

$(document).ready(function () {
    $('.sideContent').hide();
    $('.sideHeader').click(function () {
        event.preventDefault();
        var $slideContent = $(this).next()
        var slideDown =  $slideContent.is(":not(:visible)");
        $('.sideContent').slideUp('fast');

        if (slideDown)
            $slideContent.slideDown('fast');
    });
});
于 2013-08-30T08:38:01.770 に答える
0

より良い、より簡単な実装があると思います。Jquery ui アコーディオンを使用する必要があります。これを確認してください：http://jqueryui.com/accordion/

于 2013-08-30T08:25:38.357 に答える
0

こうやってみる

<div class="container-fluid">
            <div class="row-fluid">
                <div class="span8">
                    <div class="tabs">
                    <ul class="nav nav-tabs top-nav pull-right" id="tabs">
                        <li class="top-nav-item" style="visibility:hidden"><a href="javascript:void(0)"><i class="icon-circle-arrow-left icon-white"></i></a></li>
                        <li style="background-color:white">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-home"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
                        <li class="top-nav-item"><a href="#home" data-toggle="tab"><i class="icon-home icon-white"></i>&nbsp;HOME</a></li>
                        <li class="top-nav-item"><a href="#showroom" data-toggle="tab"><i class="icon-car icon-white"></i>SHOWROOM</a></li>
                        <li class="top-nav-item"><a href="#cars" data-toggle="tab">CARS</a></li>
                        <li style="background-color:white">&nbsp;</li>
                        <li class="top-nav-item"><a href="#shortlisted" data-toggle="tab"><i class="icon-ok icon-white"></i>&nbsp;SHORTLISTED</a></li>
                        <li class="top-nav-item"><a href="#settings" data-toggle="tab"><i class="icon-cog icon-white"></i>&nbsp;SETTINGS</a></li>
                    </ul>
                    </div>



                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <div id="tab-content" class="tab-content">
                        <div id="home" class="tab-pane">
                            Home
                        </div>
                        <div id="showroom" class="tab-pane">
                            Showroom
                        </div>
                        <div id="cars" class="tab-pane well">
                            Cars
                        </div>
                        <div id="shortlisted" class="tab-pane">
                            Shortlisted
                        </div>
                        <div id="settings" class="tab-pane">
                            Settings
                        </div>
                    </div>              
                </div>
            </div>


        </div>

デモhttp://jsfiddle.net/Zyxjt/1/

于 2013-08-30T08:27:44.603 に答える