Настраиваемый горизонтальный аккордеон с использованием JQuery/JQuery UI - вопрос ширины

Я написал собственный горизонтальный аккордеон, используя JQuery и JQuery UI. Ранее я писал вертикальный аккордеон, используя SlideUp и SlideDown, и он работал на отлично. В том смысле, что оба они были вызваны одновременно, и поэтому, когда один скользил вверх (с уменьшением высоты), другой скользил вниз (с увеличением высоты), и он был гладким.

Но в горизонтальном гармошке я должен скользить влево. Поэтому я использую JQuery UI Toggle("слайд") для этого. Две функции переключения вызываются одновременно, но проблема в том, что ширина элемента управления не уменьшается при его скольжении. Ширина остается неизменной, поскольку полный слайд завершен и он внезапно скрывается.

Вот мой код -

<!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>

Вы можете сохранить эту разметку, запустить ее и проверить. Есть идеи?

Источник

2 ответа

Решение

Ваша разметка была немного странной, поэтому я делаю небольшие изменения (я не эксперт в 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'));
}
Источник

Так как в IE данные в полях содержимого как-то перекрываются, мне пришлось добавить функции скрытия и показа рядом с инструкциями animate

$('#' + currentOpenContent000).hide('1000'); before: $('#' + currentOpenContent000).animate( {ширина: '0' }, 600);

а также

$ ('#' + cContent).show (); после: $('#' + cContent).animate( {ширина: '460px' }, 600);

Источник
Другие вопросы по тегам