jQuery slideToggle und div in IE

Ich habe Probleme mit jQuery SlideToggle und einem Div in IE. Mein Code ist unten:jQuery slideToggle und div in IE

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

Ich versuche, ein div, das aussieht wie eine Box mit einem leichten Farbverlauf zu machen. In diesem div möchte ich eine Liste anzeigen/ausblenden. Ich habe ein Bild als oberen Rand, einen anderen als unteren Rand und einen wiederholten als Hintergrund. Die Liste funktioniert gut in Firefox und Safari, aber wenn es um IE geht, werden die Dinge chaotisch.

In Firefox oder Safari, das Div erweitert/Verträge und sieht aus wie es soll. In IE erscheint das untere Bild an der Stelle, an der es sich befindet, wenn die Liste geöffnet ist, auch wenn sie geschlossen ist.

Irgendwelche Ideen, wie Sie das beheben können? Mache ich diese Kiste richtig?

Demo Page →

Quelle

2009-07-17 Anonymous

Welche Version von IE? – SolutionYogi

Sieht gut aus in IE8 – RaYell

Sorry, ich habe vergessen zu erwähnen, welche Version. Es ist in IE7 versaut. Vielen Dank, SolutionYogi, um die Seite online verfügbar zu machen. –

Das Problem liegt in der Verwendung von position: absolute für den unteren Rand Bild, das IE7 vermasselt zu sein scheint.

Ich denke, der beste Ansatz wäre, die Dinge ein wenig zu vereinfachen. Für den Haupthintergrund würde ich ein 1px hohes Bild verwenden, das vertikal wiederholt wird, auf diese Weise sind Sie flexibel in der Menge des Inhalts, den Sie hier einfügen können, und Sie können das Bild der unteren Kante absolut positionieren. Bei diesem Ansatz wird das Bild der unteren Kante nur am unteren Rand des mittleren Inhalts platziert, unabhängig davon, ob es erweitert oder verkleinert wird.

Die folgenden sollten helfen (ich habe rot für den Hintergrund des mittleren Inhalts anstelle des 1px hohen Bildes verwendet, um den Fix zu illustrieren - Sie müssen das Bild erstellen und an Stelle des roten einfügen).

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

Quelle

2009-07-17 20:10:44 bbodien

Es hat funktioniert! Danke vielmals. –

jQuery slideToggle und div in IE

Antwort

Verwandte Themen