中需要更改什么
所以我拥有的是隐藏在页面上的<section>，当用户单击"启动"时，<section>将出现在顶部的英雄容器<div>或Spotlight <section>上在底部取决于开始的起点。我弄清楚了如何使slidetoggle起作用，我似乎无法弄清楚如何使其覆盖另一个<div>。
从视觉上讲，就像您在床上拉毯子一样。毯子是隐藏的<section>，床是入门<div>
$("#hideshow").click(function() {
$("#IFEstream").slideToggle(1000);
});
$("#hideshow2").click(function() {
$("#IFEstream").slideToggle(1000);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Test_IFE_Splash_wrapper -->
<!-- mIFE directory -->
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CCS Logo</a>
</div>
<ul class="nav navbar-nav navbar-right visible-sm visible-xs">
<li><a href="#">DONATE</a>
</li>
</ul>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Learn more</a>
</li>
<li><a href="#">Francais</a>
</li>
<li><a href="#">LOGIN</a>
</li>
<li><a href="#">DONATE</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!-- /Navbar -->
<!--Hero Container-->
<!-- hero image -->
<!-- Get started top button -->
<!-- Get inspired, will link to spotlight sectional -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hero Image</h1>
<p>Your journey against cancer starts here.</p>
<p><a class="btn btn-primary btn-lg" role="button" id="hideshow">Get Started</a> <a class="btn btn-lg" href="#" role="button">Get Inspired</a>
</p>
</div>
</div>
<!--/Hero Container-->
<!-- 3 Steps-->
<section style="background-color: #0066CC;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4">
<h2>Decide</h2>
<p>Pick an activity that is right for you - from donating your birthday to hosting a board game night for friends and family, there are countless ways to contribute. And just like that, you’ll be part of our Cancer Fighter community!</p>
</div>
<div class="col-lg-4">
<h2>Fundraise</h2>
<p>We want to set you up for success! Once you’re registered, you will have access to all of our tips and tricks to make sure you reach your fundraising goal.</p>
</div>
<div class="col-lg-4">
<h2>Celebrate</h2>
<p>Give yourself a pat on the back and feel great knowing that you’ve just done something profound to help the 196,900 Canadians who will be diagnosed with cancer this year alone.</p>
</div>
</div>
</div>
</div>
</section>
<!-- /Sectional Blue Background -->
<!-- IFE Stream -->
<!-- section hidden until Get Started clicked, will cover above or below -->
<!-- RFI Form -->
<section id="IFEstream" style="display: none;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4">
<h1>ICON</h1>
<h3>CUT</h3>
<p>Cut it, shave it, dye it, grow it or braid it. Get started with your hair-raising fundraiser.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">START MY FUNDRAISER</a>
</div>
<div class="col-lg-4">
<h1>ICON</h1>
<h3>SWEAT</h3>
<p>Run, walk, swim, bike or paddle your way to a successful fundraising event.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">START MY FUNDRAISER</a>
</div>
<div class="col-lg-4">
<h1>ICON</h1>
<h3>My idea</h3>
<p>Already have your own idea? Or something you love to do? Turn your hobby into a meaningful fundraiser.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">START MY FUNDRAISER</a>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-lg-12">
<p class='text-muted'>REGISTER THROUGH YOUR LOCAL COMMUNITY OFFICE</p>
</div>
</div>
</div>
</section>
<!-- /IFE Stream -->
<!-- Spotlight -->
<section id="spotlight">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4">
<img src="">
<h3>Xanthe</h3>
<p>Inspired by the movie Tangled, Xanthe's goal was to grow her hair down to her ankles - but now wants to help cancer patients by donating her hair and raising funds to support the fight against cancer. Xanthe raised over $1,000 in honour of her
cousin who is battling leukemia.
</p>
</div>
<div class="col-lg-4">
<img src="">
<h3>Team Gary</h3>
<p>Team Gary recently ran in the Mississauga Marathon to support their Grandfather, Father and Family member Gary who is currently fighting liver cancer. The team of 13 raised an incredible $4,455 in the fight against cancer. Way to go Team Gary!</p>
</div>
<div class="col-lg-4">
<img src="">
<h3>Johnny Blonde Kitchen</h3>
<p>This year they were very excited to be opening a storefront location. They raised $1,300 by fundraising online, and donating 10% of sales from opening day. In addition to fundraising, Jonny cut off his famous locks and donated several inches
to Locks Of Love. We are so excited to have them be a part of our CCS family!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4">
<img src="">
<h3>Brevitas Consulting</h3>
<p>Brevitas Consulting takes on Breast Cancer Awareness Month each October with a walk-a-thon held one weekend during October bringing together their team in a fun, uplifting event. Thank you Brevitas!
</p>
</div>
<div class="col-lg-4">
<img src="">
<h3>Irudaya</h3>
<p>These talented young women created and executed a two hour dance production; Journey: A Glimpse Into Tamil Cinema. With the Society being one of their charities of choice, these dancers raised $10,000 for the fight against cancer! Amazing work!</p>
</div>
<div class="col-lg-4">
<img src="">
<h3>Maureen Parent</h3>
<p>Maureen is a breast cancer survivor who is dedicate to raising funds for cancer research. In 10 years she has raised over $85,000 with an annual pasta dinner and has her sights set on raising $1,000,000 for the fight against breast cancer.</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-12">
<div class="col-sm-12">
<p>Be a cancer fighter <a class="btn btn-primary btn-lg" id="hideshow2">Get Started</a>
</div>
</div>
</div>
</div>
</section>
<!-- /Sectional White Background -->
<!-- Footer -->
<!--Province Locator, main site, contact, policy, blackbaud -->
<footer class="footer" style="background-color: #0066CC;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-9">
<a href="#">
<img src="http://convio.cancer.ca/mUFE/2016/one/img/CCS_EnUni_Reversed_4C_EPS.png" width="200" height="80" />
</a>
</div>
<div class="text-right">
<div class="col-sm-3 ">
<a href="#">Province</a>
<a href="#">Cancer.ca</a>
<a href="#">Contact Us</a>
<a href="#">Privacy Policy</a>
<a href="#">
<img src="http://convio.cancer.ca/IFE_ON/IFE_Splash_Page_Code/img/reskin/logo_blackbaud.png" width="80" height="40" />
</a>
<br>
<p class="text-muted text-right">2016 Canadian Cancer Society All rights reserved. Registered charity: 118829803 RR 0001</p>
</div>
</div>
</div>
</div>
</div>
</footer>我尝试搜索谷歌搜索，但我想我不是正确地措辞我的问题，因为我找不到它。我知道我之前已经看过了，所以已经完成了。
感谢大家的时间，并感谢您的帮助！
我已经对您进行了更改以使其正常工作（下面说明）
有一个查看-codepen在这里
我敢肯定它不是您想要的，而是非常接近的＆amp;可以重构。
说明：
第一＆amp;最重要的是，我认为您需要了解您的HTML结构。如果您需要在 2个不同的位置中隐藏/显示的部分（切换），则您也必须在HTML中有2个部分。基本上，您应该有2个IFStream部分。基本上，当您切换按钮时，您无法动态地将整个部分从上到下移动。然后显示 - 除非您使用我不建议的真正肮脏方法，否则这是不可能的。
解决方案：
i但是使用了2个部分（在jumbotron＆amp; amp; amp;另一个下方底部开始启动的两个部分开始，然后我将它们切换为个别，这很重要。
。更新：
单击入门时，显示了适当的部分（隐藏"启动"部分） - 重叠＆amp;然后给出一个" x"图标以向后切换。
让我知道在上面的Codepen链接