jQuery函數幻燈片需要在頁面加載時折疊（沒有編碼經驗，但是處於綁定狀態！）
[英]Jquery function slide need collapsed on page load (No coding experience but in a bind!)
問題描述
首先，我很抱歉，但是我沒有編碼經驗。 我有一個朋友在我的個人網站上幫助我處理我的主頁，但由於母親的身體狀況不佳，他不得不離開了幾個星期。 同時，我需要更新我的個人網頁，但不幸的是，我沒有人去找。 他已經完成了所有工作，但是我需要更改一件。 有一個表，該表的標題和其旁邊的另一個單元格帶有[+]，單擊此鍵可運行幻燈片功能，以在其下方顯示充滿文本的另一個框。
問題是，當頁面加載時，單擊[x]時出現的框已經顯示。 我希望它是相反的。 我希望頁面僅加載標題和顯示帶有[+]的表格單元格，實際上一個人實際上必須單擊[x]才能運行幻燈片功能，然后顯示文本框。 誰能指出我正確的方向來完成這項工作？ 這是代碼：
<script type="text/javascript">
var sliderIntervalId = 0;
var sliderHeight = 200;
var sliding = false;
var slideSpeed = 15;
function Slide()
{
if(sliding)
return;
sliding = true;
if(sliderHeight == 200)
sliderIntervalId = setInterval('SlideUpRun()', 30);
else
sliderIntervalId = setInterval('SlideDownRun()', 30);
}
function SlideUpRun()
{
slider = document.getElementById('exampleSlider');
if(sliderHeight <= 0)
{
sliding = false;
sliderHeight = 0;
slider.style.height = '0px';
clearInterval(sliderIntervalId);
}
else
{
sliderHeight -= slideSpeed;
if(sliderHeight < 0)
sliderHeight = 0;
slider.style.height = sliderHeight + 'px';
}
}
function SlideDownRun()
{
slider = document.getElementById('exampleSlider');
if(sliderHeight >= 200)
{
sliding = false;
sliderHeight = 200;
slider.style.height = '200px';
clearInterval(sliderIntervalId);
}
else
{
sliderHeight += slideSpeed;
if(sliderHeight > 200)
sliderHeight = 200;
slider.style.height = sliderHeight + 'px';
}
}
</script>
</head>
<body>
<div style="position:relative;width:250px;height:250px;margin-bottom:0px;">
<div style="position:absolute;width:615px;height:48px;left:0px;text-align:center;
top:0px;background-color:#3B587A;color:#FFFFFF;border:0px solid #FFFFFF;">
<p>
<font size="4" font face="calibri" color="white"><b>Discover why you should choose us as your
Lender for life         </b></font>
</p>
<div style="position:absolute;width:48px;height:48px;right:0px;
top:0px;background-color:#85A1C2;text-align:center;
border-left:0px solid #FFFFFF;color:#000000;
cursor:pointer;" onclick="Slide();">
<font size:12px font face="georgia" color="white"><br><b>[x]</b>
</div>
</div>
<div id="exampleSlider" style="position:absolute;top:48px;left:0px;
width:604px;height:199px;background-color:#C5DAE7;padding-left:5px;padding-right:5px;
border:0px solid #FFFFFF;color:#000000;overflow:hidden;">
<p>
<font size="2" font face="ebrima" color="black">There are many Lenders out there,
but we are confident that we are the right choice for you:
<ul>
<li>Our <b>Customer Service</b> is unmatched - striving for 100% satisfaction on everything that we do </li>
<li>Our <b>Interest Rates, Private Mortgage Insurance Rates, & Fees</b> are extremely competitive - saving you time and money</li>
<li>Our <b>Availability</b> is exactly what you need - providing constant communication with night & weekend availability</li>
<li>Our <b>Flexibility</b> is exactly what you want - providing electronic & paper documentation options</li>
</ul>
</p>
</div>
</div>
</body>
</html>
1 個解決方案
解決方案1
0 已采納 2014-03-17 15:33:34
確定嘗試此代碼。 注意：通過將所有CSS直接與HTML集成，您違反了關鍵的最佳實踐 。 最好有一個單獨的CSS文件，其中包含指定類/ id的屬性。
<script type="text/javascript">
var sliderIntervalId = 0;
var sliderHeight = 0;
var sliding = false;
var slideSpeed = 15;
function Slide()
{
if(sliding)
return;
sliding = true;
if(sliderHeight == 200)
sliderIntervalId = setInterval('SlideUpRun()', 30);
else
sliderIntervalId = setInterval('SlideDownRun()', 30);
}
function SlideUpRun()
{
slider = document.getElementById('exampleSlider');
$('#expand').html('<br>[+]');
if(sliderHeight <= 0)
{
sliding = false;
sliderHeight = 0;
slider.style.height = '0px';
clearInterval(sliderIntervalId);
}
else
{
sliderHeight -= slideSpeed;
if(sliderHeight < 0)
sliderHeight = 0;
slider.style.height = sliderHeight + 'px';
}
}
function SlideDownRun()
{
slider = document.getElementById('exampleSlider');
$('#expand').html('<br>[x]');
if(sliderHeight >= 200)
{
sliding = false;
sliderHeight = 200;
slider.style.height = '200px';
clearInterval(sliderIntervalId);
}
else
{
sliderHeight += slideSpeed;
if(sliderHeight > 200)
sliderHeight = 200;
slider.style.height = sliderHeight + 'px';
}
}
</script>
</head>
<body>
<div style="position:relative;width:250px;height:250px;margin-bottom:0px;">
<div style="position:absolute;width:615px;height:48px;left:0px;text-align:center;
top:0px;background-color:#3B587A;color:#FFFFFF;border:0px solid #FFFFFF;">
<p>
<font size="4" font face="calibri" color="white"><b>Discover why you should choose us as your
Lender for life         </b></font>
</p>
<div id="expand" style="position:absolute;width:48px;height:48px;right:0px;
top:0px;background-color:#85A1C2;text-align:center;
border-left:0px solid #FFFFFF;color:#000000;cursor:pointer;size:12px;face:georgia;color:white;style:bold;" onclick="Slide();"><br>
[+]
</div>
</div>
<div id="exampleSlider" style="position:absolute;top:48px;left:0px;
width:604px;height:0px;background-color:#C5DAE7;padding-left:5px;padding-right:5px;
border:0px solid #FFFFFF;color:#000000;overflow:hidden;">
<p>
<font size="2" font face="ebrima" color="black">There are many Lenders out there,
but we are confident that we are the right choice for you:
<ul>
<li>Our <b>Customer Service</b> is unmatched - striving for 100% satisfaction on everything that we do </li>
<li>Our <b>Interest Rates, Private Mortgage Insurance Rates, & Fees</b> are extremely competitive - saving you time and money</li>
<li>Our <b>Availability</b> is exactly what you need - providing constant communication with night & weekend availability</li>
<li>Our <b>Flexibility</b> is exactly what you want - providing electronic & paper documentation options</li>
</ul>
</p>
</div>
</div>
</body>
這是一個JSFiddle演示
Jquery 手風琴在頁面加載時折疊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.