1

我使用 JQuery 和 JQuery UI 编写了一个自定义的水平手风琴。以前我使用 SlideUp 和 SlideDown 编写了垂直手风琴，效果很好。从某种意义上说，他们两个同时被调用，所以当一个向上滑动（高度减小）时，另一个向下滑动（高度增加）并且它是平滑的。

但是在水平手风琴中，我必须向左滑动。所以我使用 JQuery UI Toggle('slide') 来做到这一点。两个切换函数同时被调用，但问题是控件的宽度在滑入时没有减小。宽度保持不变，因为完整的滑动完成并且它突然被隐藏了。

这是我的代码 -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Accordion</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript">

        //temporary variables

        //append PCID at the end
        var currentOpenContent000;
        var pcid000 = '000';
        var time = 1000;
        var controlwidth = 600;
        var contentWidth = 400;
        var controlHeight = 400;

        $(document).ready(function () {
            autoScale();
            initializeControl();
            createEvents();
        });

        function autoScale() {
        }

        function setNormalsppheaderStyle(element) {
            $(element).css({
                'background-color': '#347235',
                'color': '#FFFFFF'
            });
        }

        function setHoversppheaderStyle(element) {
            $(element).css({
                'background-color': 'orange',
                'color': '#FFFFFF'
            });
        }

        function setSelectedsppheaderStyle(element) {
            $(element).css({
                'background-color': 'orange',
                'color': '#FFFFFF'
            });
        }

        function createEvents() {
            $('div[id*=header]').click(function () {
                if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
                    return;

                //hide old item
                setNormalsppheaderStyle($('#' + currentOpenContent000.replace('content', 'header')));
                $('#' + currentOpenContent000).toggle('slide');

                var cHeader = $(this).attr('id');
                var cContent = $(this).attr('id').replace('header', 'content');

                //show new item
                setSelectedsppheaderStyle($(this));
                $('#' + cContent).toggle('slide');
                currentOpenContent000 = cContent;

            });

            $('div[id*=header]').mouseover(function () {
                setHoversppheaderStyle($(this));
            });

            $('div[id*=header]').mouseout(function () {
                if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
                    return;
                setNormalsppheaderStyle($(this));
            });
        }

        function initializeControl() {
            var first = $('#' + pcid000 + 'content1');
            first.toggle('slide');
            currentOpenContent000 = pcid000 + 'content1';
            setSelectedsppheaderStyle($('#' + pcid000 + 'header1'));
        }
    </script>
</head>
<body>
    <div style="border: 1px solid red; padding: 1px; float: left" id="000outer">
        <table cellpadding="1" cellspacing="0" style="margin: 0; padding: 0">
            <tr>
                <!--Loop this content-->
                <td>
                    <div id="000header1" style="background-color: darkgreen; width: 30px; height: 396px;">
                    </div>
                </td>
                <td>
                    <div id="000content1" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
                <td>
                    <div id="000header2" style="background-color: darkgreen; width: 30px; height: 396px">
                    </div>
                </td>
                <td>
                    <div id="000content2" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
                <td>
                    <div id="000header3" style="background-color: darkgreen; width: 30px; height: 396px">
                    </div>
                </td>
                <td>
                    <div id="000content3" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
                <td>
                    <div id="000header4" style="background-color: darkgreen; width: 30px; height: 396px">
                    </div>
                </td>
                <td>
                    <div id="000content4" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

您可以保存此标记并运行它并检查它。有任何想法吗？

4

2 回答 2

4

你的标记有点奇怪，所以我做了一些小改动（我不是 CSS 专家）。游乐场链接：http: //jsfiddle.net/CoolEsh/8LNkG/6/

HTML：

<div style="border: 1px solid red; padding: 1px; float: left" id="outer">

    <div id="header1" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content1" style="background-color: silver; width: 0; height: 396px; float:left;">
    </div>
    <div id="header2" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content2" style="background-color: silver; height: 396px; float:left;">
    </div>
    <div id="header3" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content3" style="background-color: silver; height: 396px; float:left;">
    </div>
    <div id="header4" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content4" style="background-color: silver; height: 396px; float:left;">
    </div>

</div>

JS：

//temporary variables

//append PCID at the end
var currentOpenContent000;
var time = 1000;
var controlwidth = 600;
var contentWidth = 400;
var controlHeight = 400;

$(document).ready(function () {
    autoScale();
    initializeControl();
    createEvents();
});

function autoScale() {
}

function setNormalsppheaderStyle(element) {
    element.css({
        'background-color': '#347235',
        'color': '#FFFFFF'
    });
}

function setHoversppheaderStyle(element) {
    element.css({
        'background-color': 'orange',
        'color': '#FFFFFF'
    });
}

function setSelectedsppheaderStyle(element) {
    element.css({
        'background-color': 'orange',
        'color': '#FFFFFF'
    });
}

function createEvents() {
    $('div[id^="header"]').click(function () {
        if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
            return;

        //hide old item
        setNormalsppheaderStyle($('#' + currentOpenContent000.replace('content', 'header')));
        $('#' + currentOpenContent000).animate( { width: '0' }, 500 );

        var cHeader = $(this).attr('id');
        var cContent = $(this).attr('id').replace('header', 'content');

        //show new item
        setSelectedsppheaderStyle($(this));
        $('#' + cContent).animate( { width: '400px' }, 500 );
        currentOpenContent000 = cContent;

    });

    $('div[id^="header"]').mouseover(function () {
        setHoversppheaderStyle($(this));
    });

    $('div[id^="header"]').mouseout(function () {
        if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
            return;
        setNormalsppheaderStyle($(this));
    });
}

function initializeControl() {
    var first = $('#content1');
    first.show().animate( { width: '400px' }, 500 );
    currentOpenContent000 = 'content1';
    setSelectedsppheaderStyle($('#header1'));
}
于 2011-06-27T11:29:45.347 回答
0

由于在 IE 中内容框中的数据以某种方式重叠，我不得不在动画指令旁边添加隐藏和显示功能

$('#' + currentOpenContent000).hide('1000'); 之前： $('#' + currentOpenContent000).animate( { width: '0' }, 600 );

和

$('#' + cContent).show(); 之后： $('#' + cContent).animate( { width: '460px' }, 600 );

于 2012-02-04T14:35:18.483 回答