Question

我想添加一个转换，当通过切换按钮激活twitter引导程序折叠菜单时，该转换将推送我的主要内容。

但与折叠菜单转换不同，如果我快速双击切换按钮，我的主要内容元素不会完成初始转换，而是使用转换进行恢复。

总之，如果我在主要内容转换完成之前切换折叠菜单，我的内容将会上升并隐藏在Bootstrap折叠菜单后面。

在CSS中，重要的部分是最底部的两个过渡。

var icon = document.getElementsByClassName("icon-bars");
var pushDown = document.getElementById("push");

//icon[0].addEventListener("mouseenter", highlight)
//icon[0].addEventListener("mouseleave", highlightNone);

/*
function highlight() {
  listOfIcons = document.querySelectorAll(".icon-bar");
  for(var i=0; i<listOfIcons.length; i++) {
    listOfIcons[i].classList.add("icon-bar-light");
  }
}

function highlightNone() {
  var listOfIcons = document.querySelectorAll(".icon-bar");
  for(var i=0; i<listOfIcons.length; i++) {
    listOfIcons[i].classList.remove("icon-bar-light");
  }
}
*/

$(document).ready(function(){
  $(icon[0]).click(function(){
    if($(pushDown).hasClass("push")){
      pushDown.className = "pushUp";
    }
    else{
      pushDown.className = "push";
    }
  })
});

form {
    max-width: 500px;
    margin: 0px auto;
    text-align: center;
}

input, textarea {
    border: 3px solid #f47909;
    padding-bottom: 10px;
}

input:focus, textarea:focus {
    outline: none;
    border: 3px solid #f2a25a;
}

label {
    display: block;
    margin-bottom: 20px;
}

span {
    display: block;
}

textarea {
    max-height: 200px;
    height: 200px;
    width: 300px;
    max-width: 300px;
}


/*rest same as index.css*/

*{
    font-family: 'futura';
}

.navvy {
    border-radius: 0px;
    margin: 0px;
    height: 70px;
    padding-top: 5px;
}

@media screen and (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    li{
      padding-right: 30px;
      font-size: 19px;
    }
}

@media screen and (max-width: 767px) {
    .navbar-collapse {
      margin-top: 15px;
      background-color: #FAFAFA;
    }
    li {
      font-size: 17px;
    }
}

.icon-bar {
  background-color: #337ab7;
}

.icon-bar-light {
  background-color: #23527C;
}

#li-back:hover {
  background-color: #FAFAFA;
  font-size: 20px;
  font-weight: bolder;
}

.navbar-brand {
  font-size: 25px;
  color: #1d78c6;
}

#footer {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 2px dotted #8bc771;
  text-align: center;
}

#description {
  margin-top: 20px;
  text-align: center;
  font-size: 30px;
}

.push{
  transition: transform 0.5s;
  transform: translate(0px, 160px);
}

.pushUp{
  transition: transform 0.5s;
  transform: translate(0px, 0px);
}

<!doctype html>
<html lang="en">
<head>
    <title>VirusFun</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

    <link rel="stylesheet" href="/css/contacts.css" type="text/css">

</head>
<body>
  <div class="introPic">

  </div>
  <nav class="navbar navbar-default navbar-static-top navvy">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <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="index.html">Virus Fun</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1" role="navigation">
        <ul class="nav navbar-nav">
          <li><a id="li-back" href="index.html">Home</a></li>
          <li><a id="li-back" href="gallery.html">Gallery</a></li>
          <li><a id="li-back" href="#">About</a></li>
          <li><a id="li-back" href="contacts.html">Contacts</a></li>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <div id="push" class="">
    <!--The blurb -->
    <p id="description">Ask whatever you want!</p>

    <!-- The body -->
    <div class="container-fluid">
      <form action="https://formspree.io/jackgong48@gmail.com"
        method="POST">

        <div class="row">
          <div class="col-sm-6 col-xs-6">
            <label id="name">
              <span>Your Name</span>
              <input tabindex="1" placeholder="John Smith" type="text" name="name">
            </label>
          </div>
          <div class="col-sm-6 col-xs-6">
            <label id="email">
              <span>Your Email</span>
              <input tabindex="2" placeholder="johnsmith@gmail.com" type="email" name="Sender">
            </label>
          </div>
        </div>

        <label>
          <span>Your Message</span>
            <textarea tabindex="3" name="message"></textarea>
        </label>
        <div class="send">
            <input tabindex="4" type="submit" value="Send">
        </div>
      </form>
    </div>
    <footer id="footer">
        <p>© 2017 VIRUS FUN ALL RIGHTS RESERVED</p>
    </footer>
  </div>

    <!--need this code to be declared before javascript-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="/javascript/javascript.js"></script>

    <script src="jquery/jquery-3.1.1.min.js"></script>

</body>
</html>

Answer 1

以下是我的建议https://jsfiddle.net/ye4s17n8/3/。这里的关键时刻是导航栏“in”的类，仅在显示菜单时应用，并且在菜单动画期间应用类“折叠”。

<强> HTML

<div id="push" class="push">

<强> CSS

.push      { transition: transform 0.5s;}
.push.up   { transform: translate(0px, 0px); }
.push.down { transform: translate(0px, 160px); }

<强> JS

var $toggle = $('.navbar-toggle');
var $push = $('#push');
var $navbar = $('.navbar-collapse');

$toggle.on('click', function(){
  if ($navbar.hasClass('collapsing')) {
    return false;
  }
  if ($navbar.hasClass('in')) {
    $push.removeClass('down').addClass('up');
  } else {
    $push.removeClass('up').addClass('down');
  }
});

转换完成后，请监听新事件

1 个答案: