隱藏的右側邊欄只使用位置

嗨，我已經建立了2個側邊欄。一個左側邊欄通過將元素從屏幕上偏移併爲左側屬性賦予負值而被隱藏。另一方面，右側菜單沒有正確消失，我仍然可以水平滾動並查看此菜單。如何在不使用display：none或visibility：hidden的情況下隱藏右側邊欄。我正在添加代碼。隱藏的右側邊欄只使用位置

$(function() { 
 
     $("#arrow_btn").click(function() { 
 
      $("#navbar, .upper_menu").toggleClass('active'); 
 
      $("#upper_left_menu").toggleClass('open_left_menu'); 
 
      console.log("look for arrow btn element"); 
 
      console.log("upper_left_menu", $("#upper_left_menu")); 
 
      console.log('$("#navbar")', $("#navbar")); 
 
     }); 
 

 
     $(".project_item").click(function (event) { 
 
      var list = $(this).siblings(); 
 
      var i = $(this).find('i'); 
 
      $(list).toggleClass('closed_nested_list'); 
 
      if ($(i).hasClass('fa-plus')) { 
 
       $(i).removeClass('fa-plus'); 
 
       $(i).addClass('fa-minus'); 
 
      } else { 
 
       $(i).addClass('fa-plus'); 
 
       $(i).removeClass('fa-minus'); 
 
      } 
 
      console.log('traverse over all project items'); 
 
      console.log('i', i); 
 
      console.log('list', list); 
 
     }); 
 
     
 
     $("#email").click(function(){ 
 
      console.log("you clicked email ya ya "); 
 
      $("#right-navbar").css("display",'inline-block'); 
 
      $("#right-navbar, .upper_menu").toggleClass('active'); 
 
      $("#upper_right_menu").toggleClass('open_right_menu'); 
 
     }); 
 
     
 
    $(".list_item").click(function(){ 
 
     console.log('you clicked list item'); 
 
     $("#chatWrapper").toggleClass('active'); 
 
$("#right-navbar").toggleClass('aside'); 
 
     $("#upper_right_menu").toggleClass('aside_right_menu'); 
 
    }); 
 
     
 
    });

#arrow_btn{ 
 
     font-size: 30px; 
 
     font-weight:normal; 
 
    } 
 

 
    #arrow_btn:hover{ 
 
     color: #3983C4; 
 
    } 
 

 
    .upper_menu {  
 
     display: block; 
 
     background-color: #F2F6F7; 
 
     width: 100%; 
 
     top: 0; 
 
     right: 0; 
 
    } 
 
    #upper_left_menu { 
 
     width: 30px; 
 
     height: 30px; 
 
     z-index: 1; 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 

 
#upper_right_menu{ 
 
     z-index: 1; 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
} 
 

 
    .open_left_menu { 
 
     margin-left: 223px; 
 
     
 
    } 
 

 
.open_right_menu { 
 
     margin-right: 223px; 
 
    -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 
.aside_right_menu{ 
 
    margin-right: 43.5%; 
 
} 
 
    #upper_right_menu { 
 
     position: absolute; 
 
     top: 0px; 
 
     right: 0px; 
 
    } 
 

 
    #exclamation-triangle, 
 
    #envelope { 
 
     font-size: 24px; 
 
    } 
 

 
    .warning, 
 
    .email { 
 
     margin: 10px; 
 
    } 
 
    
 
#navbar { 
 
     position: absolute; 
 
     left: -16em; 
 
     top: 0; 
 
     bottom: 0; 
 
     background-color: white; 
 
     box-shadow: 4px 0 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
    } 
 

 
    #navbar ul { 
 
     width: 224px; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 1em; 
 
    } 
 

 
#right-navbar{ 
 
    
 
    position: absolute; 
 
     right: -16em; 
 
     top: 0; 
 
     bottom: 0; 
 
     background-color: white; 
 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
} 
 

 
#chatWrapper{ 
 
    display:none; 
 
    position: absolute; 
 
     right: -32em; 
 
     top: 0; 
 
     bottom: 0; 
 
     width:338.667px; 
 
     background-color: white; 
 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
} 
 

 
#right-navbar ul { 
 
     width: 224px; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 1em; 
 
    } 
 
/* hovering */ 
 
    #chatWrapper, 
 
    #chatWrapper * 
 
    #right-navbar, 
 
    #right-navbar *, 
 
    #navbar, 
 
    #navbar * { 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 

 
    #navbar.active { 
 
     left: 0px; 
 
    } 
 

 
    #right-navbar.active{ 
 
     right: 0px; 
 
    -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 
#right-navbar.aside{ 
 
     right: 26.5%; 
 
    } 
 
#chatWrapper.active{ 
 
    right:0%; 
 
} 
 

 
    .nested_list { 
 
     display: inline-block; 
 
     visibility: visible; 
 
    } 
 

 
    .closed_nested_list { 
 
     display: none; 
 
    } 
 

 
    .project_item { 
 
     font-family: 'Segue UI', Calibri, arial, verdana, sans-serif; 
 
     font-size: 18px; 
 
    }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<nav class="upper_menu"> 
 
    <div id="upper_left_menu"> 
 
     <span id="arrow_btn" class="glyphicon glyphicon-play-circle"></span> 
 
    </div> 
 
    <div id="upper_right_menu"> 
 
     <a href="#" class="warning"><i id="exclamation-triangle" class=" fa fa-exclamation-triangle"></i><span id="exclamation_notifications_count">2</span></a> 
 
     <a href="#" id="email" class="email"><i id="envelope" class=" fa fa-envelope-o"></i><span id="email_notifications_count">5</span></a> 
 
    </div> 
 
</nav> 
 
<nav id="navbar"> 
 
    <ul> 
 
     <li class="project_container"> 
 
      <span class="project_item" > 
 
       <i class="fa fa-plus"></i> 
 
       FDR Project 
 
      </span> 
 
      <ul id="listOne" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Niagara Project</span> 
 
      <ul id="listTwo" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listThree" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listFour" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav> 
 

 
<nav id="right-navbar"> 
 
    <ul> 
 
     <li class="project_container"> 
 
      <span class="project_item" > 
 
       <i class="fa fa-plus"></i> 
 
       FDR Project 
 
      </span> 
 
      <ul id="listOne" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Niagara Project</span> 
 
      <ul id="listTwo" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listThree" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listFour" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav> 
 

 
<nav id="chatWrapper"> 
 
    Hello Chat Warpper 
 
</nav>

沒有在左邊的菜單一小片的原代碼，只在右側的菜單

$(function() { 
 
     
 
     $("#email").click(function(){ 
 
      console.log("you clicked email ya ya "); 
 
      $("#right-navbar").css("display",'inline-block'); 
 
      $("#right-navbar, .upper_menu").toggleClass('active'); 
 
      $("#upper_right_menu").toggleClass('open_right_menu'); 
 
     }); 
 
     
 
    $(".list_item").click(function(){ 
 
     console.log('you clicked list item'); 
 
     $("#chatWrapper").toggleClass('active'); 
 
$("#right-navbar").toggleClass('aside'); 
 
     $("#upper_right_menu").toggleClass('aside_right_menu'); 
 
    }); 
 
     
 
    });

#arrow_btn{ 
 
     font-size: 30px; 
 
     font-weight:normal; 
 
    } 
 

 
    #arrow_btn:hover{ 
 
     color: #3983C4; 
 
    } 
 

 
    .upper_menu {  
 
     display: block; 
 
     background-color: #F2F6F7; 
 
     width: 100%; 
 
     top: 0; 
 
     right: 0; 
 
    } 
 

 
#upper_right_menu{ 
 
     z-index: 1; 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
} 
 

 
    .open_left_menu { 
 
     margin-left: 223px; 
 
     
 
    } 
 

 
.open_right_menu { 
 
     margin-right: 223px; 
 
    -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 
.aside_right_menu{ 
 
    margin-right: 43.5%; 
 
} 
 
    #upper_right_menu { 
 
     position: absolute; 
 
     top: 0px; 
 
     right: 0px; 
 
    } 
 

 
    #exclamation-triangle, 
 
    #envelope { 
 
     font-size: 24px; 
 
    } 
 

 
    .warning, 
 
    .email { 
 
     margin: 10px; 
 
    } 
 
    
 
#right-navbar{ 
 
    
 
    position: absolute; 
 
     right: -16em; 
 
     top: 0; 
 
     bottom: 0; 
 
     background-color: white; 
 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
} 
 

 
#chatWrapper{ 
 
    display:none; 
 
    position: absolute; 
 
     right: -32em; 
 
     top: 0; 
 
     bottom: 0; 
 
     width:338.667px; 
 
     background-color: white; 
 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
} 
 

 
#right-navbar ul { 
 
     width: 224px; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 1em; 
 
    } 
 
/* hovering */ 
 
    #chatWrapper, 
 
    #chatWrapper * 
 
    #right-navbar, 
 
    #right-navbar * { 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 

 
    #navbar.active { 
 
     left: 0px; 
 
    } 
 

 
    #right-navbar.active{ 
 
     right: 0px; 
 
    -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 
#right-navbar.aside{ 
 
     right: 26.5%; 
 
    } 
 
#chatWrapper.active{ 
 
    right:0%; 
 
} 
 

 
    .nested_list { 
 
     display: inline-block; 
 
     visibility: visible; 
 
    } 
 

 
    .closed_nested_list { 
 
     display: none; 
 
    } 
 

 
    .project_item { 
 
     font-family: 'Segue UI', Calibri, arial, verdana, sans-serif; 
 
     font-size: 18px; 
 
    }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="upper_menu"> 
 
    <div id="upper_left_menu"> 
 
     <span id="arrow_btn" class="glyphicon glyphicon-play-circle"></span> 
 
    </div> 
 
    <div id="upper_right_menu"> 
 
     <a href="#" class="warning"><i id="exclamation-triangle" class=" fa fa-exclamation-triangle"></i><span id="exclamation_notifications_count">2</span></a> 
 
     <a href="#" id="email" class="email"><i id="envelope" class=" fa fa-envelope-o"></i><span id="email_notifications_count">5</span></a> 
 
    </div> 
 
</nav> 
 
<nav id="right-navbar"> 
 
    <ul> 
 
     <li class="project_container"> 
 
      <span class="project_item" > 
 
       <i class="fa fa-plus"></i> 
 
       FDR Project 
 
      </span> 
 
      <ul id="listOne" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Niagara Project</span> 
 
      <ul id="listTwo" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listThree" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listFour" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav> 
 
<nav id="chatWrapper"> 
 
    Hello Chat Warpper 
 
</nav>

來源

2016-03-21 Brk

您是否可以僅發佈相關代碼（或者最好是一個小的獨立示例）而沒有所有額外的內容？ –

這是最小的代碼，我可以發佈。我想演示左側邊欄菜單如何完美工作，而右側邊欄菜單無法正常工作。 – Brk

但我會嘗試將它傳遞給一個小例子 – Brk

移動從評論的答案...

將overflow-x: hidden;添加到導航欄的父元素（在此示例中，父級將爲body）。

當導航欄離開屏幕右側時，這將保持水平滾動條不會出現。

來源

2016-03-21 16:15:02

隱藏的右側邊欄只使用位置

回答

相關問題