个人中心
gpt4 book ai didi

javascript - Jquery 函数幻灯片需要在页面加载时折叠(没有编码经验，但处于绑定(bind)状态!)

转载 作者：行者123 更新时间：2023-11-28 08:25:35 25 4
gpt4 key购买 nike

首先我很抱歉，但我没有编码经验。我有一个 friend 帮我管理我的个人网站主页，但由于他母亲的健康状况不佳，他不得不离开几周。与此同时，我需要更新我的个人网页，但不幸的是我没有人可以求助。他已经完成了所有的事情，但有一件我需要改变。有一个表格，有一个标题和旁边的另一个单元格，单击该单元格时会运行幻灯片功能，以在其下方显示另一个充满文本的框。

问题是，当页面加载时，单击 [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&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</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>

最佳答案

好的，试试这个代码。 注意:将所有 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&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</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 Demo

关于javascript - Jquery 函数幻灯片需要在页面加载时折叠(没有编码经验，但处于绑定(bind)状态!)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22457935/

25 4 0
文章推荐： javascript - Jquery Mobile 中 .mobile.loadPage 和外部页面的问题
文章推荐： ios - Twitter 让 UITableView 滚动流畅的技巧是什么？
文章推荐： javascript - 在 Twitter Bootstrap 弹出窗口中引用对象
文章推荐： swift - 在 MacOS 中下载 Alamofire。看起来不错，进度正常，但没有文件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com