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

Posted 2023-03-24

【中文标题】用数据切换属性打开的jQuery关闭div？

【英文标题】：Close div with jQuery which opened with data toggle attribute?

【发布时间】：2013-09-02 21:35:43

【问题描述】：

我有几个隐藏的 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');
    )

);

【问题讨论】：

这里的隐藏事件不会起作用，因为这里的div没有设置为隐藏，而是它的高度改为0px

【参考方案1】：

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

【讨论】：

Bootstrap 内置了一个带有父属性的手风琴，可以关闭所有其他打开的 div。

【参考方案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/

【讨论】：

这是选项卡式内容，并不是我真正想要完成的内容

【参考方案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');
    );
);