Javascript：摆脱动画混蛋-折叠后侧边栏打开时

时间：2018-11-03 19:09:30

标签： javascript html css

我有一个边栏，该边栏在单击链接后会折叠。它运行平稳，没有任何剧烈运动。但是，当我尝试再次打开它时-即使它打开了，它也会产生一个向下的冲击。

为什么会发生这种情况，我该如何解决？

这是jsfiddle：https://jsfiddle.net/h98kcpnL/5/

html ：

<body>

<div id="mySidenav" class="sidenav">

           <a href="#" data-toggle="sidebar-collapse-button">
                    <img class="sidebar-img" id = "collapse-img" src="https://image.freepik.com/icones-gratis/dupla-seta-apontando-para-a-esquerda_318-49842.jpg"/>
                    <span class="sidebar-text">Collapse</span>
           </a>

            <a data-img-name="home.png" href="${pageContext.request.contextPath}">
                    <img class="sidebar-img" src="https://imageog.flaticon.com/icons/png/512/25/25694.png"/>
                    <span style="right: 0px;" class="sidebar-text">Home</span>
            </a>

          <a data-img-name="User.png" href="${pageContext.request.contextPath}">
                    <img class="sidebar-img" src="https://cdn3.iconfinder.com/data/icons/business-and-finance-icons/512/Business_Man-512.png"/>
                    <span style="right: 0px;" class="sidebar-text">Profile</span>
          </a>

          <a data-img-name="" href="#">
                <img class="sidebar-img" src="https://mbtskoudsalg.com/images/friends-icon-png-2.png"/>
                <span style="right: 0px;" class="sidebar-text">Friends</span>
          </a>

          <a data-img-name="" href="#">
                <img class="sidebar-img" src="https://static.thenounproject.com/png/38699-200.png"/>
                <span style="right: 0px;" class="sidebar-text">Tasks</span>
          </a>

          <a data-img-name="" href="#">
                <img class="sidebar-img" src="https://cdn1.vectorstock.com/i/1000x1000/07/50/notification-icon-vector-21160750.jpg"/>
                <span style="right: 0px;" class="sidebar-text">Notifications</span>
          </a>


</div>

<div class="content">

<p>
some content
</p>

</div>

</body>

js ：

var collapsed = 0;

$('[data-toggle=sidebar-collapse-button]').click(function() {
    if (collapsed == 0)  {
    closeNav();
    }
    else  {
        openNav();
    }   

});



function openNav() {
        document.getElementById("mySidenav").style.width = "280px";


    let sidenavLinks = document.getElementsByClassName("sidenav")[0].getElementsByTagName("a");
    for (j = 0; j < sidenavLinks.length; j++) { 
            sidenavLinks[j].setAttribute("class", "");
    }

    var navigationText = document.getElementsByClassName('sidebar-text');
    for (var i = 0; i < navigationText.length; i ++) {
            navigationText[i].style.display = 'inline-block';
    }


    collapsed = 0;    

}

function closeNav() {
    document.getElementById("mySidenav").style.width = "90px";

    let sidenavLinks = document.getElementsByClassName("sidenav")[0].getElementsByTagName("a");
    for (j = 0; j < sidenavLinks.length; j++) { 
            sidenavLinks[j].setAttribute("class", "collapsed");
    }

    var navigationText = document.getElementsByClassName('sidebar-text');

    for (var i = 0; i < navigationText.length; i ++) {
            navigationText[i].style.display = 'none';
    }


    collapsed = 1;

}

css ：

body {
    margin: 0;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
}


/*SIDEBAR*/

#mySidenav  {
    width: 280px;
}


.sidebar-img  {
    padding: 0px;
    padding-top: 16px;
    padding-bottom: 16px;

    left: 0px;

    width: 30px;
}



.sidenav a {
        padding: 16px 16px 16px 32px;
        text-decoration: none;
        font-size: 25px;
        color: var(--sidebar-inactive-text-color);
        display: block;
        transition: 0.3s;

}

.sidenav a:hover {
        color: var(--sidebar-active-text-color);
        background-color: var(--sidebar-active-text-background-color);
}


a.collapsed  {


}

.sidebar-text  {
    right: 0px !important;
}


.sidenav   {
    display: inline-block; /* fixes that spacing issue */
    background-color:  var(--sidebar-background-color) !important;


}

.sidebar-img + .sidebar-text  {
    margin-left: 40px;


}


.sidenav {
    margin-top: var(--sidebar-top); 

        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.2s;
        padding-top: var(--sidebar-top);
}

.sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
}

#main {
        transition: margin-left .2s;
        padding: 16px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}


/*END SIDEBAR*/


.content  {
    align: center;
    margin-left: 480px;
    margin-top: 300px;

}

1 个答案:

答案 0 :(得分：1)

用另一个宽度（280px）的div（.navContent）包裹导航栏的内容。将#mySidenav overflow-x属性设置为hidden（fiddle）。

#mySidenav {
  width: 280px;
  overflow-x: hidden;
}

.navContent {
  width: 280px;
}

现在，您还可以删除隐藏标签的代码，因为溢出也会将其隐藏。

var collapsed = 0;

$('[data-toggle=sidebar-collapse-button]').click(function() {
  if (collapsed == 0) {
    closeNav();
  } else {
    openNav();
  }
});

function openNav() {
  document.getElementById("mySidenav").style.width = "280px";

  collapsed = 0;
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "90px";

  collapsed = 1;
}
body {
  margin: 0;
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
}


/*SIDEBAR*/

#mySidenav {
  width: 280px;
  overflow-x: hidden;
}

.navContent {
  width: 280px;
}

.sidebar-img {
  padding: 0px;
  padding-top: 16px;
  padding-bottom: 16px;
  left: 0px;
  width: 30px;
}

.sidenav a {
  padding: 16px 16px 16px 32px;
  text-decoration: none;
  font-size: 25px;
  color: var(--sidebar-inactive-text-color);
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: var(--sidebar-active-text-color);
  background-color: var(--sidebar-active-text-background-color);
}

a.collapsed {}

.sidebar-text {
  right: 0px !important;
}

.sidenav {
  display: inline-block;
  /* fixes that spacing issue */
  background-color: var(--sidebar-background-color) !important;
}

.sidebar-img+.sidebar-text {
  margin-left: 40px;
}

.sidenav {
  margin-top: var(--sidebar-top);
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.2s;
  padding-top: var(--sidebar-top);
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .2s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}


/*END SIDEBAR*/

.content {
  align: center;
  margin-left: 480px;
  margin-top: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div id="mySidenav" class="sidenav">
    <div class="navContent">

      <a href="#" data-toggle="sidebar-collapse-button">
        <img class="sidebar-img" id="collapse-img" src="https://image.freepik.com/icones-gratis/dupla-seta-apontando-para-a-esquerda_318-49842.jpg" />
        <span class="sidebar-text">Collapse</span>
      </a>

      <a data-img-name="home.png" href="${pageContext.request.contextPath}">
        <img class="sidebar-img" src="https://imageog.flaticon.com/icons/png/512/25/25694.png" />
        <span style="right: 0px;" class="sidebar-text">Home</span>
      </a>

      <a data-img-name="User.png" href="${pageContext.request.contextPath}">
        <img class="sidebar-img" src="https://cdn3.iconfinder.com/data/icons/business-and-finance-icons/512/Business_Man-512.png" />
        <span style="right: 0px;" class="sidebar-text">Profile</span>
      </a>

      <a data-img-name="" href="#">
        <img class="sidebar-img" src="https://mbtskoudsalg.com/images/friends-icon-png-2.png" />
        <span style="right: 0px;" class="sidebar-text">Friends</span>
      </a>

      <a data-img-name="" href="#">
        <img class="sidebar-img" src="https://static.thenounproject.com/png/38699-200.png" />
        <span style="right: 0px;" class="sidebar-text">Tasks</span>
      </a>

      <a data-img-name="" href="#">
        <img class="sidebar-img" src="https://cdn1.vectorstock.com/i/1000x1000/07/50/notification-icon-vector-21160750.jpg" />
        <span style="right: 0px;" class="sidebar-text">Notifications</span>
      </a>
    </div>

  </div>

  <div class="content">

    <p>
      some content
    </p>

  </div>

</body>

相关问题
最新问题