Question

我有一些使用bootstrap和数据切换打开的隐藏div，我不能显示多个隐藏的div，所以当打开一个时我希望其他人关闭。

这是我尝试过的jQuery，但是当＃add-alert-box关闭时，我没有收到警报。我有一个demo in jsfiddle这是可能的还是我必须使用jQuery激活每个隐藏的div而不是数据属性？

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

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

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

});

Answer 1

我认为实施起来更好更容易。你应该使用Jquery ui手风琴。检查一下：http://jqueryui.com/accordion/

Answer 2

以这种方式试试

<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/

Answer 3

您可以根据需要检查基本演示和样式并为其着色。

<强> 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');
    });
});

使用数据切换属性打开的jQuery关闭div？

3 个答案: