jquery - 使用 .slideToggle() (或任何其他 jQuery 方法)如何让一个 div 在单击按钮后与另一个重叠？

Question

所以我有一个 <section>隐藏在页面上，当用户单击“开始”时，<section>将出现在英雄容器上 <div>在顶部或聚光灯下 <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&#8217;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&#8217;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&#8217;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 &nbsp; <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>&nbsp;
            <a href="#">Cancer.ca</a>&nbsp;
            <a href="#">Contact Us</a>&nbsp;
            <a href="#">Privacy Policy</a>&nbsp;
            <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>

我尝试使用谷歌搜索，但我想我的问题措辞不正确，因为我找不到它。我知道我以前见过它，所以它已经完成了。

感谢大家的宝贵时间，感谢您的帮助!

Answer 1

我已经对您的代码进行了更改以使其正常工作(下面的解释)

看看 - Codepen here

我确定它不完全是您要找的东西，但它非常接近并且可以重构。

解释:

首先，我认为您需要了解您的 HTML 结构。如果您需要在2 个不同的地方 隐藏/显示(切换)该部分，那么您也必须在 HTML 中有 2 个部分。基本上你应该有 2 个 IFStream 部分。基本上，当您切换按钮然后显示它时，您不能从上到下动态移动整个部分 - 这是不可能的，除非您使用我不推荐的非常脏的方法。

解决方案:

但是我已经使用了 2 个部分(一个位于超大屏幕顶部下方的 Get Started 下方，另一个位于底部的 Get Started 下方)，然后我单独 切换它们，这很重要。

更新:

单击“开始”时，会显示相应的部分(隐藏“开始”部分)- 重叠，然后给出“X”图标以将其切换回来。

在上面的 Codepen 链接中让我知道需要更改的内容