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://api.jquery.com/slideToggle/
.parents：http://api.jquery.com/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();

jquery在时间切换一个div

2 个答案: