javascript - 隐藏的右侧边栏仅使用位置

嗨，我有2个侧边栏。通过将元素从屏幕上偏移并为他赋予left属性负值，可以隐藏一个左侧边栏。
另一方面，右侧菜单没有正确消失，我仍然可以水平滚动并查看此菜单。
如何不使用display：none或visible：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>

最佳答案

从评论中移出答案...

将overflow-x: hidden;添加到导航栏的父元素（在此示例中，父元素为body）。

当导航栏离开屏幕右侧时，这将防止水平滚动条出现。

关于javascript - 隐藏的右侧边栏仅使用位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36135497/