jquery在時間切換一個div

Question

在我的html頁面中，我有2個具有切換功能的div。 我需要修改這個js，讓它在打開時關閉其他div

我的js

jQuery( "div.bk-toggle-header" ).click(function(){
jQuery(this).siblings('div.bk-toggle-content-outer-wrap').animate({
height: 'toggle'
}, 'slow', function() {                 
});
jQuery(this).parents('div.bk-toggle').toggleClass('bk-toggle-closed');
});

我的HTML

    <div class="bk-toggle bk-toggle-closed">
    <div class="bk-toggle-header content-separator">
     <span class="title">First Tab</span>
    <span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap"> content
    </div></div>

    <div class="bk-toggle bk-toggle-closed">
    <div class="bk-toggle-header content-separator">
     <span class="title">Second Tab</span>
    <span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap" > content
    </div></div>

我很感激幫助一次切換一個div。

Answer 1

工作演示 http://jsfiddle.net/f492H/

下面的解決方案將一次切換一個div。 你也可以玩其他Jquery方式！就像is(':visible')

使用的API：

• .slideToggle ： http ： .slideToggle
• .parents ： http ： .parents

希望它符合您的需求:)

碼

$('.bk-toggle-content-outer-wrap').hide();
$('.title').on('click', function (e) {
    $('.bk-toggle-content-outer-wrap').hide();
    $(this).parents('.bk-toggle').find('.bk-toggle-content-outer-wrap').slideToggle();
});

Answer 2

我可以為你提供一個我為之前的項目寫過的手風琴課程。 它相當靈活，應該完成你的要求和更多。 文檔是......不存在，但如果您選擇使用它，我很樂意回答任何實現問題。

這是一個小提琴： http ： //jsfiddle.net/YjAgb/1/

更新：這是另一個使用你的html結構的小提琴： http ： //jsfiddle.net/WfWEP/

而且，為了徹底，這是演示代碼。

HTML

<div id='accordion'>
    <div class='accHead'>Head 1</div>
    <div class='accBody'>Body 1</div>
    <div class='accHead'>Head 2</div>
    <div class='accBody'>Body 2</div>
    <div class='accHead'>Head 3</div>
    <div class='accBody'>Body 3</div>
</div>

JavaScript的

function accordion(options){

        this.index = options.index;
        var openChild = false;

        var self = this;
        var cEvent = {};
        var slideSpeed = 200;

        var headClass = '.accHead';
        var bodyClass = '.accBody';

        var $parent = options.parent;
        var $heads = $parent.find(headClass);
        var $bodies = $parent.find(bodyClass)

        $heads.on('click', function(e){

            var headClicked = $heads.index($(this)) + 1;
            var wasTriggered = (!e.clientX);

            var previousOpen = (headClicked == openChild) ? headClicked : openChild;
            var newOpen = (headClicked == openChild) ? false : headClicked;

            $heads.add($bodies).removeClass('on');

            if (!openChild) {
                var type = 'open';
            } else if(headClicked == openChild) {
                var type = 'close';
            } else {
                var type = 'swap';
            }

            cEvent = {  clicked: headClicked,
                        triggered: wasTriggered,
                        previousOpen: previousOpen,
                        openChild: newOpen,
                        headElement: $(this),
                        bodyElement: $bodies.index(headClicked - 1),
                        type: type,
                        accordion: self
                    };

            options.click_callback(cEvent);

            if (openChild) closeLevel((headClicked == openChild) ? headClicked : openChild);
            if ((!openChild) || (headClicked != openChild)) openLevel(headClicked);

            openChild = newOpen;

        });

        var openLevel = function(levelId)
        {
            var $bodyEl = $bodies.eq(levelId - 1);
            var $headEl = $heads.eq(levelId - 1);
            cEvent.bodyElement = $bodyEl;
            cEvent.headElement = $headEl;

            $headEl.addClass('on');
            $bodyEl.addClass('on').slideDown(slideSpeed, function(){
                options.open_callback(cEvent);
            })
        }

        var closeLevel = function(levelId)
        {
            var $bodyEl = $bodies.eq(levelId - 1);
            var $headEl = $heads.eq(levelId - 1);
            cEvent.bodyElement = $bodyEl;
            cEvent.headElement = $headEl;

            $bodyEl.slideUp(slideSpeed, function(){
                options.close_callback(cEvent);
            });
        }

        this.closeAll = function()
        {
            $heads.add($bodies).removeClass('on');
            $bodies.slideUp(0);
            return this;
        }

        this.click = function(levelId, caller)
        {
            if(caller.index != this.index) $heads.eq(levelId - 1).trigger('click');
        }

        this.getHead = function(levelId)
        {
            return $heads.eq(levelId - 1);
        }

        this.getBody = function(levelId)
        {
            return $bodies.eq(levelId - 1);
        }

        this.getParentAcc = function()
        {
            return $parent;
        }

    }

newAcc = new accordion({
    parent: $('#accordion'),
    click_callback: function(){},
    open_callback: function(){},
    close_callback: function(){},
    })
    .closeAll();