ここで動作する素敵なjqueryスライドダウン効果があります：
http://georgedesign.co.uk/test/markupV2/index.html
[サービス] セクションまたは [チーム] セクションで、任意のパネルをクリックすると、[詳細] ボックスが開きます。ボックスをもう一度クリックすると、消えます。
問題は次のとおりです。IE(7) では、「About」という名前の一番最初のパネルが、残りのパネルのように動作しません。代わりに、親 div の下にスライドし、「位置」を採用していないようです:固定された ' css スタイルは他のものと同じです..
このパネルの内容も見えません..
私はこの問題を 1、2 週間見つめ続けており、私の目は溶けています..
他のすべてのブラウザーで正常に機能し、他のパネルは正常に機能するが、最初のパネルでは機能しない理由がわかりません。
誰かがコードをざっと見て、私が見逃していたものを見ることができたら (必見!)、別の目で見てくれてありがとう..!
本当にありがとう、
G
ps、JQuery は短縮できると確信していますが、まだ理解が進んでいません。;)
それが役立つ場合のコードは次のとおりです。
HTML:
<div class="our-services">
<strong class="slogan main-strap">Property Investment for Private Equity</strong>
<span id="services" class="scroll"> </span>
<h2>Our Services</h2>
<p>We are a UK & European Property Investment and Asset Management Business, dedicated to generating value and providing real returns to our investors in any environment.</p>
<ul class="services-list">
<li class="slide1">
<div class="holder">
<div class="frame">
<h3><a href="#">About</a></h3>
<div class="description">
<p>Our business was established in 2002 and we remain an inspired and motivated team of property professionals.</p>
</div>
<img src="images/img1.jpg" width="233" height="139" alt="about" />
<a class="more" href="#">Read more...</a>
</div>
</div>
</li>
<div class="Text1 round">
<img src="images/X.gif" class="x-class" width="12" height="12" alt="X">
<p>Our success is driven by our integrity which is at the heart of everything we do, our recognition of the wisdom and vision of others around us, and our will to succeed.
Collectively the Athanor Team have in excess of 80 years experience working in real estate and financial markets. This has given us a deep understanding of how to innovate and drive value in changing conditions. We have been involved in property transactions with a value of in excess of £3 billion.<br>
Athanor are specialists in :</p>
<ul>
<li>The origination of property investment opportunities
</li>
<li>Strategy & analysis
</li>
<li>Debt origination
</li>
<li>Establishment of appropriate corporate, tax and fund structures
</li>
<li>Property asset management.
</li>
<li>Property disposals.
</li>
</ul>
<img class="round" src="images/img88.jpg" width="300" height="154" alt="Mission Crane">
</div>
<li class="slide2">
<div class="holder">
<div class="frame">
<h3><a href="#">Mission</a></h3>
<div class="description">
<p>To excel in providing our clients with a focused, individual and comprehensive solution to property investing.</p>
</div>
<img src="images/img2.jpg" width="233" height="139" alt="mission" />
<a class="more" href="#">Read more...</a>
</div>
</div>
</li>
<li class="slide3">
<div class="holder">
<div class="frame">
<h3><a href="#">Strategy</a></h3>
<div class="description">
<p>At Athanor we focus on ‘value’ investing into primarily institutional quality property.</p>
</div>
<img src="images/img3.jpg" width="233" height="139" alt="strategy" />
<a class="more" href="#">Read more...</a>
</div>
</div>
</li>
</ul>
<div class="Text2 round">
<img class="round" src="images/mission-crane.jpg" width="450" height="306" alt="Mission Crane">
<img src="images/X.gif" class="x-class" style="float:right" width="12" height="12" alt="X">
<h3>Mission</h3>
<p>"To excel in providing our clients with a focused, individual and comprehensive solution to property investing. To generate value and real returns in any environment."
</p>
</div>
<div class="Text3 round">
<img src="images/X.gif" class="x-class" width="12" height="12" alt="X">
<p>At Athanor we focus on 'value' investing into primarily institutional quality property. We target assets providing long term locational stability, with secure and attractive income returns and which also have the potential for both income and capital growth. Cash forms a significant proportion of our total return expectations.<br>
New opportunities are selected via a combination of research, intelligence and experience.<br>
Our approach is opportunistic both geographically and by property sector, although always with a view to having a balance commensurate with our perception of the risks and rewards associated with those sectors and geographies.<br>
We understand that real estate assets are very responsive to active management. Consequently asset management is a core activity which ensures returns are maximised throughout the life of investments.<br>
Primary geographies – UK and Continental Europe.<br>
Property sectors – all property sectors but primarily retail, logistics/industrial, offices, leisure and residential.</p>
</div>
</div>
CSS:
li.slide1, li.slide2, li.slide3, li.mug1, li.mug2, li.mug3, li.mug4 {cursor:pointer;}
div.Text1, div.Text2, div.Text3, div.mugText1, div.mugText2, div.mugText3, div.mugText4 {display:none; margin-top:24px;}
div.Text1, .Text2, .Text3, .mugText1, .mugText2, .mugText3, .mugText4 {
background-color: white;
position:fixed;
top:215px;
width:860px;
height:323px;
padding:20px;
border: 1px solid #e6e6e6;
}
.mugText1, .mugText2, .mugText3, .mugText4 {position:fixed; top:215px; height:400px;}
.Text1 img {float:right;}
.Text1 p {margin:0; font-size:18px;}
.Text1 ul {font-size:16px; width:440px; float:left;}
.Text2 img {float:left}
.Text2 p, .Text2 h3 {margin: 0 90px 0 490px !important;}
.Text3 p {font-size:18px}
JS:
$('.slide1').click( function() { $('.Text1').slideDown(500).fadeIn(500);
$('.Text2').slideUp(250).fadeOut(0); $('.Text3').slideUp(250).fadeOut(0); } );
$('.slide2').click( function() { $('.Text1').slideUp(250).fadeOut(0);
$('.Text2').slideDown(500).fadeIn(500); $('.Text3').slideUp(250).fadeOut(0); } );
$('.slide3').click( function() { $('.Text1').slideUp(250).fadeOut(0); $('.Text2').slideUp(250).fadeOut(0);
$('.Text3').slideDown(500).fadeIn(500); } );
$('.Text1, .Text2, .Text3').click( function() { $('.Text1, .Text2, .Text3').slideUp(250).fadeOut(0); } );
$('.mug1').click( function() { $('.mugText1').slideDown(500).fadeIn(500);
$('.mugText2').slideUp(250).fadeOut(0); $('.mugText3').slideUp(250).fadeOut(0);
$('.mugText4').slideUp(250).fadeOut(0); } );
$('.mug2').click( function() { $('.mugText2').slideDown(500).fadeIn(500);
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText3').slideUp(250).fadeOut(0);
$('.mugText4').slideUp(250).fadeOut(0); } );
$('.mug3').click( function() { $('.mugText3').slideDown(500).fadeIn(500);
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText2').slideUp(250).fadeOut(0);
$('.mugText4').slideUp(250).fadeOut(0); } );
$('.mug4').click( function() { $('.mugText4').slideDown(500).fadeIn(500);
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText2').slideUp(250).fadeOut(0);
$('.mugText3').slideUp(250).fadeOut(0); } );
$('.mugText1, .mugText2, .mugText3, .mugText4').click( function() { $('.mugText1, .mugText2, .mugText3, .mugText4').slideUp(150).fadeOut(0); } );
}