jQuery slideToggle и div в IE - PullRequest
Новая
       50

jQuery slideToggle и div в IE

0 голосов
/ 17 июля 2009

У меня проблемы с slideToggle и div в jQuery. Мой код ниже: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {
        $(".toggle_container").hide();

        $("span.trigger").click(function(){
            $(this).next(".toggle_container").slideToggle("slow");
        });
    });

</script>

<style type="text/css">
div#prog { width:250px; background:url('http://imgur.com/ozduu.gif') repeat-y; position:relative; margin:0 auto;}
div#prog img { margin:0; padding:0; border:0;}
div#prog_mid { width: 208px; margin:0 auto; padding: 0 20px;}

img#prog_bottom { position:absolute; bottom:0;}


span.trigger { width: 100%;}
.toggle_container { margin:0 0 5px; padding:0; background:transparent; overflow:hidden; width:100%; clear:both;}
.toggle_container .block { padding: 5px; }

.block ul { list-style:none; padding-left:5px; padding-top:0; margin-top:0;}
.block ul li a { color:#169494; width:100%; display:block; text-decoration:none;}

</style>
</head>

<body>
<div id="prog">
    <img src="http://imgur.com/po7R1.gif"/>
    <div id="prog_mid">
        <h1>Phase 1</h1>
        <img id="prog_dots" src="http://imgur.com/anDNd.gif"/>
            <span class="trigger"><a href="#">CLICK HERE</a></span>
            <div class="toggle_container">
                <div class="block">
                    <ul>
                        <li><a href="">list item 1</a></li>
                        <li><a href="">list item 2</a></li>
                        <li><a href="">list item 3</a></li>
                        <li><a href="">list item 4</a></li>
                        <li><a href="">list item 5</a></li>
                    </ul>
                </div>
            </div>
        <br />
    </div>
    <img id="prog_bottom" src="http://imgur.com/r3fcf.gif" />
</div>

Я пытаюсь создать div, похожий на прямоугольник с небольшим градиентом к нему. В этом разделе я хочу показать / скрыть список. У меня есть изображение в качестве верхней границы, еще одно в качестве нижней границы и повторное изображение в качестве фона. Список отлично работает в Firefox и Safari, но когда дело доходит до IE, все становится запутанным.

В Firefox или Safari div расширяется / сжимается и выглядит так, как должно. В IE нижнее изображение появляется в том положении, в котором оно будет, если список находится в открытом состоянии, даже когда он закрыт.

Есть идеи как это исправить? Собираюсь ли я сделать эту коробку правильным способом?

Демонстрационная страница & rarr;

1 Ответ

1 голос
/ 18 июля 2009

Проблема заключается в том, что вы используете позицию: абсолютную для изображения нижнего края, которое IE7, похоже, портит.

Я думаю, что лучшим подходом было бы немного упростить вещи. Для основного фона я бы использовал изображение высотой 1px, которое повторяется по вертикали, таким образом, вы гибко подходите к количеству контента, которое вы можете поместить сюда, и вы можете покончить с абсолютным позиционированием изображения нижнего края. При таком подходе изображение нижнего края будет просто располагаться внизу среднего содержимого, независимо от того, расширено оно или сжато.

Следующее должно помочь (я использовал красный цвет для фона среднего содержимого вместо изображения высотой 1 пиксель, чтобы проиллюстрировать исправление - вам нужно создать изображение и поместить его вместо красного) . 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<!--

  Created using http://jsbin.com
  Source can be edited via http://jsbin.com/ugaza/edit

-->

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {
        $(".toggle_container").hide();

        $("span.trigger").click(function(){
            $(".toggle_container").slideToggle("slow");
        });
    });

</script>

<style type="text/css">

div#prog { width:250px; background: red; margin:0 auto; }
div#prog img { margin:0; padding:0; border:0; display: block; }
div#prog_mid { width: 208px; margin:0 auto; padding: 0 20px; }
div#prog img#prog_dots { margin: 10px 0; }
span.trigger { width: 100%;}
.toggle_container .block { padding: 5px; }
.block ul { list-style:none; padding-left:5px; padding-top:0; margin-top:0;}
.block ul li a { color:#169494; width:100%; display:block; text-decoration:none;}

</style>
</head>

<body>

<div id="prog">
    <img src="http://imgur.com/po7R1.gif"/>
    <div id="prog_mid">
        <h1>Phase 1</h1>
        <span class="trigger"><a href="#">CLICK HERE</a></span>
        <img id="prog_dots" src="http://imgur.com/anDNd.gif"/>

            <div class="toggle_container">
                <div class="block">
                    <ul>
                        <li><a href="">list item 1</a></li>
                        <li><a href="">list item 2</a></li>
                        <li><a href="">list item 3</a></li>
                        <li><a href="">list item 4</a></li>
                        <li><a href="">list item 5</a></li>
                    </ul>
                </div>
            </div>

    </div>
    <img id="prog_bottom" src="http://imgur.com/r3fcf.gif" />
</div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...