Javascript:摆脱动画 SCSS - 当侧边栏在折叠后打开时

我的侧边栏在单击链接后会折叠。进展顺利，没有任何剧烈的 Action 。然而，当我尝试再次打开它时 - 它会向下猛拉，即使当它打开时，一切都在它应该在的位置。

为什么会发生这种情况以及我应该如何解决它？

这是 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;

}

最佳答案

用另一个具有相同宽度 (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>

关于Javascript:摆脱动画 SCSS - 当侧边栏在折叠后打开时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53134607/

Javascript:摆脱动画 SCSS - 当侧边栏在折叠后打开时

上一篇：html - 溢出元素内的粘性元素

下一篇：javascript - 在 WKWebView(iOS，Swift)中使用本地 Javascript 源加载本地 HTML