1

JQuery と JQuery UI を使用して、カスタムの水平アコーディオンを作成しました。以前、SlideUp と SlideDown を使用して垂直アコーディオンを書きましたが、完全にうまく機能しました。ある意味では、両方が同時に呼び出されたので、一方が上にスライドして（高さが減少）、もう一方が下にスライドして（高さが増加）、スムーズでした。

しかし、水平アコーディオンでは、左にスライドする必要があります。そこで、JQuery UI Toggle('slide') を使用してそれを行います。2 つのトグル関数が同時に呼び出されますが、問題はコントロールの WIDTH がスライドしても減少しないことです。完全なスライドが完了し、突然非表示になるため、幅はそのままです。

ここに私のコードがあります -

<!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( { 幅: '0' }, 600 );

と

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

于 2012-02-04T14:35:18.483 に答える