2

我有一些隐藏的 div 使用引导程序和数据切换打开，我不能显示多个隐藏的 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

试试这个方法

<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 回答
0

我认为有更好和更容易的实施。您应该使用 Jquery ui Accordion。检查这个：http: //jqueryui.com/accordion/

于 2013-08-30T08:25:38.357 回答
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 回答