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

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

转载作者：行者123 更新时间：2023-11-28 16:25:46

您好，我已经构建了 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>

最佳答案

移动评论中的答案...

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

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

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

文章推荐： javascript - uploadify - 限制单个文件上传

文章推荐： python - 带线的 Matplotlib 极坐标图

文章推荐： javascript - 条件中的 window.addEventListener

文章推荐： html - 媒体查询不适用于手机(但适用于浏览器)

internet-explorer - 仅 Windows 7，仅 IE，认为我的网站证书有问题？
我仅在 WIN7 PC 上收到此通知，仅使用 IE。 Firefox 总是很好，旧版 Windows 上的 IE 似乎也不错。这让我大吃一惊，我不知道为什么 IE 认为 SSL 证书有问题。有没有人以
wix - 升级期间未复制文件(仅)
概述对于我产品的新版本 v1.9.0，我创建了一个新的 MSI 安装程序。该应用程序的先前版本是 v1.7.0。卸载旧版本然后安装新版本工作正常。但是当我尝试使用 v1.9.0 安装程序更新旧版
仅 JavaScript 按钮按下时平滑滚动
该网站有一个全高图像启动。更多内容位于首屏下方，图像底部有一个“滚动”元素，以提示用户发现其余内容。单击后，我成功地使网站向下滚动 300 像素。然而，我想顺利地做到这一点。这是我当前的代码: w
javascript - 动态创建类名。仅
var i = 0; function Myfunc() { var newdiv = document.createElement('div'); var el = document
仅 JavaScript 图像悬停
这纯粹是为了学习目的；我知道 CSS 将是这种情况下的首选方法。我知道在 JavaScript 中，您可以使用内联事件处理将鼠标悬停在图像上，如下所示: 我知道您可以在您的站点中安装 jQuery
仅 curl 发布数据和标题
我只想从curl请求中获取 header curl -I www.google.com 一切都很棒。现在我想这样做，但也传递发布数据: curl -I -d'test=test' www.google
javascript - 仅 getElementsByName？
以下代码旨在更改一个字段的颜色: Untitled Document var bkColor =
仅 Grep 第一个匹配项并停止
我正在使用 grep 递归搜索目录，并使用以下参数希望只返回第一个匹配项。不幸的是，它返回了不止一个——事实上，我上次查看时返回了两个。似乎我有太多的争论，尤其是没有得到想要的结果。 :-/ # gr
仅 grep 当前目录
我只想搜索当前目录中的所有文件。我试过这个 grep foo * 但我收到此错误 grep: bar: Is a directory 我也尝试过这个 grep -r foo 但这也在搜索子目录。最佳
JavaFx如何打印文本(仅)收据？
我正在构建一个销售点应用程序，我想打印一张收据。问题是我使用的打印机无法打印纯文本的任何图形，我在 javafx 中只能找到使用 Print API 打印节点或使用像 jasper 这样都包含图形的报
仅 Java 操作系统
是否有任何操作系统在完全加载时仅提供用于控制台应用程序执行的 java 环境？理想情况下，它会在加载时自动启动程序最佳答案这是一个名称为:JavaOS 的东西从我的角度来看，更好的方法是安装一个
仅 MySQL 转储还原增量
在工作中，我们有一个每晚执行 mysql 数据转储的脚本。对于开发，我们通常需要使用来自最近转储的数据。一段时间以来，我们一直每天都进行数据库还原，但现在我们已经到了每天还原花费近一个小时的地步。有没
javascript - 需要禁用下拉菜单的淡出功能(仅)
我的移动模式菜单有问题。 onClick 它淡出。我想保留此设置，但我不希望它在单击下拉部分时淡出。这是链接:http://jsfiddle.net/zLLzrs6b/3/感谢您的帮助! html:
仅 css 在屏幕尺寸变化时调整图像大小的灵活布局
经过大量研究和反复试验，我谦虚地向各位 CSS 专家寻求帮助。这就是我需要的: 我有两张图片:titlelogo 和 newlogo。在全屏模式下，newlogo 需要在左边，titlelogo 在
javascript - 选择具有特定属性的标签(仅)
这个问题在这里已经有了答案: Exclusive CSS selector (3 个答案) 关闭 3 年前。我的文档结构如下: ... ... something something someth
html - 强制可变宽度表格列内容以最大宽度换行*仅*
我有一个具有以下要求的表: 所有列的宽度必须可变所有列的宽度不得超过必要的宽度所有单元格必须保留空白(white-space:pre/pre-wrap) 当(且仅当)超过最大定义宽度 (1000p
c++ - 具有特殊字符的数字的正则表达式**仅**
我正在寻找一个正则表达式来仅匹配具有特殊字符且大小为4+ 的数字字符串。我对此处发布的问题做了一些评论: 测试网站: http://regexlib.com/RETester.aspx 1- re
仅 CSS 灯箱解决方案
我正在为我的元素开发一个纯 CSS 灯箱解决方案。我用谷歌搜索了它，但到目前为止只找到了部分解决方案。我正在寻找这些功能: 显示任意宽任意高的内容(无固定高/宽) 垂直居中和水平居中如果内容宽度和
仅 CSS 网格布局
出于各种原因，我目前正在尝试使用 HTML/CSS 创建网格布局(我知道 Bootstrap 等，但在这种情况下没有选择，而且我无法添加标记元素)。我有以下代码(容器 div，每次都有一个带有 ul
仅 Java 字符串格式小数
有没有办法使用String.format()格式化 double 以仅获取小数？ System.out.println(String.format("%.2f", 1.23456d)); 正如预期的那

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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