如何使用jquery在轮播上方隐藏和显示页脚？

Question

我希望在主页加载时隐藏页脚，并在单击 show 和 hide 按钮时显示和隐藏页脚 我的按钮代码可以很好地显示和隐藏页脚 我的问题是：页面加载时如何隐藏页脚以及如何在轮播上方插入页脚？谢谢

$(document).ready(function () {
  $("#hide").hover(function () {
    $("footer").hide(1000);
  });
  $("#show").hover(function () {
    $("footer").show(1000);
  });
});

<div style="margin-left: auto; margin-right: auto;">
  <div style="padding: 0;">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
      <div class="carousel-inner">
        @foreach (var item in Model.Carousels)
        {

        if (item == Model.Carousels.FirstOrDefault())
        {
        <div class="item active ">
          <img style="height:380px; width:100%;" class="img-responsive center-block" src="@Url.Content(item.CarouselImage.ToString())">
          <div class="carousel-caption">
            <h2 class="h">@item.CarouselSubject</h2>
            <h4 class="h">@item.CarouselInfo</h4>
          </div>
        </div>
        }
        else
        {
        <div class="item">
          <img style="height: 380px; width: 100%;" class="img-responsive center-block" src="@Url.Content(item.CarouselImage.ToString())" />
          <div class="carousel-caption">
            <h2 class="h">@item.CarouselSubject</h2>
            <h4 class="h">@item.CarouselInfo</h4>
          </div>
        </div>
        }
        }

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
  <div class="text-center">
    <button id="hide">Hide</button>
    <button id="show">Show</button>
  </div>

  <footer class="footer" style="background-color:#191919; text-align:center;color:GrayText;clear:both;margin-bottom:-30px;">

    <div>
      <ul style="display: inline-block; text-align: right; list-style-type: none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">quick</li>
        <li class="list-group-item"><a class="Alist" href="">login</a></li>
        <li class="list-group-item"><a class="Alist" href="">sign up</a></li>


      </ul>
      <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">manu</li>
        <li class="list-group-item"><a class="Alist" href="">text5</a></li>
        <li class="list-group-item"><a class="Alist" href="">text6</a></li>
        <li class="list-group-item"><a class="Alist" href="">text7</a></li>

      </ul>

      <ul style=" display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold; padding-bottom:10px;" class="list-group-item">follow us</li>

        <li class="list-group-item">
          @foreach (var item in Model.SocialNetworks)
          {
          <ul style=" display:inline-block;text-align:right;list-style-type:none;">
            <li>
              <a href="@item.SocialLink">
                <img class="img-responsive center-block socialIcon" src="@Url.Content(item.SocialIcon.ToString())" />
              </a>
            </li>
          </ul>
          }

        </li>

      </ul>
    </div>
    <div>
      <hr style="width: 70%; background-color: #5d5d5d; height: 0.5px; border: 0 none; " />
    </div>
    <div style="text-align:center;">

      <span style="text-align:center;">&copy;</span>

    </div>
  </footer>

</div>

Answer 1

如上一个回答所说，请用这个来隐藏页脚：

$(document).ready(function(){
  $("footer").hide();
});

并插入关于轮播的footer，您可以使用：

$("footer").insertBefore(".carousel");

Answer 2

这是为了在页面加载时隐藏页脚：

$(document).ready(function(){
 $("footer").hide();
});

对于轮播上方的插入页脚：

$("footer").insertBefore("#myCarousel");