0

在我的 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。

4

2 回答 2

2

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

下面的解决方案将一次切换一个 div。您也可以使用其他 Jquery 方式！喜欢is(':visible')

使用的 API：

希望它符合您的需求:)

代码

$('.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();
});
于 2013-10-28T00:58:19.673 回答
0

我可以为您提供我为以前的项目编写的手风琴课程。它相当灵活，应该可以完成您的要求等等。文档……不存在，但如果您选择使用它，我很乐意回答任何实施问题。

这是一个小提琴：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();
于 2013-10-28T01:13:12.090 回答