开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当我在正文之外单击时，侧边栏菜单不会折叠/关闭

当您在正文之外单击时，侧边栏菜单不会折叠/关闭的情况可能是由于以下原因：

前端开发：侧边栏菜单的折叠/关闭功能是通过前端开发实现的。可能是在代码中设置了点击正文之外的区域不触发折叠/关闭的事件，或者在代码中没有正确绑定点击事件。
后端开发：侧边栏菜单的状态（折叠/关闭）可能是通过后端开发与前端交互实现的。如果后端开发逻辑中没有正确处理点击正文之外的区域的情况，就会导致侧边栏菜单不会折叠/关闭。
前端框架：如果您使用了前端框架，例如React、Vue等，可能是框架本身的特性或配置导致了这种行为。您可以查阅相关框架的文档，了解如何正确配置侧边栏菜单的折叠/关闭功能。
CSS样式：侧边栏菜单的折叠/关闭功能可能是通过CSS样式控制的。可能是在样式中设置了点击正文之外的区域不触发折叠/关闭的效果，或者样式中没有正确定义点击事件的范围。

针对这个问题，您可以尝试以下解决方案：

检查前端代码：查看前端代码中与侧边栏菜单相关的部分，确保点击事件的绑定和处理逻辑正确。
检查后端代码：如果侧边栏菜单的状态由后端控制，检查后端代码中与侧边栏菜单相关的逻辑，确保正确处理点击正文之外的区域的情况。
检查前端框架配置：如果使用了前端框架，查阅相关文档，了解如何正确配置侧边栏菜单的折叠/关闭功能。
检查CSS样式：检查CSS样式中与侧边栏菜单相关的部分，确保点击事件的范围正确定义。

腾讯云相关产品和产品介绍链接地址：

腾讯云前端开发相关产品：https://cloud.tencent.com/product/webhosting
腾讯云后端开发相关产品：https://cloud.tencent.com/product/cvm
腾讯云数据库相关产品：https://cloud.tencent.com/product/cdb
腾讯云服务器运维相关产品：https://cloud.tencent.com/product/cvm
腾讯云云原生相关产品：https://cloud.tencent.com/product/tke
腾讯云网络通信相关产品：https://cloud.tencent.com/product/vpc
腾讯云网络安全相关产品：https://cloud.tencent.com/product/ddos
腾讯云音视频相关产品：https://cloud.tencent.com/product/vod
腾讯云多媒体处理相关产品：https://cloud.tencent.com/product/mps
腾讯云人工智能相关产品：https://cloud.tencent.com/product/ai
腾讯云物联网相关产品：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发相关产品：https://cloud.tencent.com/product/apigateway
腾讯云存储相关产品：https://cloud.tencent.com/product/cos
腾讯云区块链相关产品：https://cloud.tencent.com/product/baas
腾讯云元宇宙相关产品：https://cloud.tencent.com/product/3d

相关搜索:侧边栏菜单在单击时不会折叠在侧边栏菜单外部单击或单击菜单项时关闭侧边栏菜单如何使用JavaScript在单击时关闭折叠的侧边栏？单击切换按钮时，折叠菜单不会关闭折叠的菜单不会在单击时关闭菜单内容在单击引导时不会折叠 Bootstrap折叠导航栏在单击子菜单后不会保持折叠状态 React导航栏在单击链接时不会折叠在HTML站点的导航栏元素之外单击时，如何关闭打开的折叠导航栏？当我单击选项菜单时，折叠工具栏上的滚动错误在div之外单击无法关闭iphone中的切换栏菜单在主窗口中单击时关闭侧边栏的css 在焦点区域之外单击时，弹出窗口不会关闭向现有.js添加代码以在单击外部菜单时折叠导航栏当用户使用Vue js在边栏导航菜单之外单击时，如何隐藏该菜单？AngularJs <md- menu -content>在菜单外单击时不会关闭在侧边栏父级之外显示下拉菜单，并在滚动时使菜单也根据其父级滚动，当我在bootstrap中使用导航栏下拉菜单时，我在angular中不能有多个单击事件引导导航栏在mob视图中不起作用当我单击按钮时，下拉菜单不显示当我第二次在模式之外单击时，它第一次关闭，但没有关闭。我不想关闭那个模式

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Jupyterlab 使用手册：号称要取代 Jupyter Notebook

数据显示，Github上有超过300万个 Jupyter Notebook 可供公开使用。私有的 Notebook 数量也大致相同。即使没有这些数据佐证，我们也非常清楚Jupyter Notebook在数据科学领域的普及程度。

06

前端成神之路-vue前端项目02

1.实现后台首页的基本布局 2.实现左侧菜单栏 3.实现用户列表展示 4.实现添加用户

01

Flutter 可折叠边栏

移动应用程序具有多种方法来处理屏幕之间的导航，例如导航抽屉，底部导航栏，滑动选项卡等。

05

PubMed使用者指南（一）

学习一个工具最直接有效的方式就是阅读它的官方指南，今年我们来学习一下PubMed的最新指南。

01

搭建后台管理系统的思路

搭建后台管理系统最基础的是什么呢？个人的体会是整体的基础框架，这个是指最基础的框架，比如根 router-view, 侧边栏以及侧边栏的router-view，以及顶部栏，等基础布局的控制。

02

Chrome 87 新特性解读，多年来 Chrome 性能最大提升！

今天 Chrome 更新了 87 最新版，这是今年最后一次 Chrome 更新了，这个版本是多年来 Chrome 性能获得最大提升的一次，开发者工具也进行了大幅度更新。

03

使用iPad将iPad用作Mac的第二台显示器

原文：https://support.apple.com/zh-cn/HT210380

00

iOS好用的第三方侧边栏控件——MMDrawerController

很多应用程序都采用了侧边栏这样的界面结构，MMDrawerController是一个轻量级的侧边栏抽屉控件，其支持左侧抽屉和右侧抽屉，可以很好的支持导航控制器，并且支持开发者对手势和动画进行自定义。MMDrawerController的git地址如下：

02

20个vscode快捷键，让编码快如闪电

并不是每个人都有时间去仔细研究每一个技巧，并找到技巧来帮助他们更快地编写代码 --- 因为技巧太多了。

02

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发（侧边栏菜单生成、标签栏开发）

页面比较简单，主要分为左侧的菜单栏，顶部的导航栏（折叠左侧菜单，切换暗黑模式，员工账号名，退出登录），再下面的标签栏，之后就是主页面显示区域。

03

如何在Mac上轻松更改Finder的外观

macOS Finder是一个方便的实用程序，但是如果您自定义外观，它可能会为您提供更好的服务。这里有一些改变Finder外观的技巧！

00

实例操作

这次我们需要实现的场景是在前端表格环境中，像模板按钮那样，点击之后弹出一个侧边栏，然后通过点击不同的单元格显示不同的内容。

02

建站日志

重新启用阅读原始文档功能，并解决GitHub Pages服务由于原始文档里的某些特殊代码导致部署失败的问题

03

VS Code 调试完全攻略（4）：launch.json 和调试控制台

一些更强大的调试功能仅在专用的配置文件中可用。这次我们要创建一个 launch.json 和内置的 VSCode 调试控制台。本文将会解决我们在调试复杂的程序之前的最后一个难题。

03

begin主题使用说明（详解教程）

主题有些功能会用到文章点击量，所以必须安装文章点击统计插件：wp-postview，也可后台搜索安装官方最新版。

04

三种插件开发模式，带你玩废tinymce

前言 TinyMCE是一款开源、易用、UI时新、所见即所得的富文本编辑器。是富文本领域中的佼佼者。整体设计和模式，都是非常不错的。其提供的API 极其丰富和强大，简单点就是专业牛👍，可供广大开发者用户，方便快捷的自行进行扩展或根据实际业务需求进行二次开发。下面我将分享3种方式，带你玩废 tinymce，适合接触过 tinymce 的小伙伴，如果没有接触过就随便看看，收藏也不吃亏，保不齐，后面用得上，知道可以这样玩就好了😎 利用tinymce官方提供的 UI 组件扩展 tinymce 官方提供还算多的

03

Podman AI Lab带来的AI全家桶

如果你正在苦于不知如何着手这个新潮的生成式 AI 趋势，那么对于 Linux 用户来说，红帽的 Podman Desktop “AI Lab” 为探索 AI 提供了一条便捷的捷径。

01

超好看的30款网站侧边栏设计

侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。

01

『React Navigation 3x系列教程』createDrawerNavigator开发指南

这篇文章将向大家分享createDrawerNavigator的一些开发指南和实用技巧。

01

七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout jQuery UI布局插件官方网站：http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局

02

CodeWave系列：3.CodeWave 智能开发平台页面布局及呈现

前一节我们学习了CodeWave的路线图，对CodeWave 已经有一个整体的认识了，本节我们开始学习页面设计，页面布局和页面跳转等具体功能。

01

VS Code 必知必会的 20 个快捷键！

并不是每一个开发者都有足够的时间，去了解熟悉所有的快捷键，来帮助我们提高编码效率。因为快捷键实在是太多了。

01

blender 2.8的基本使用和使用形态键(Shape key)做帧动画

接下来我们来做一个盒子的形状，点击上方的Modeling进入编辑状态。将左边的工具栏拉宽直至可以看到名字：

01

如何搭建 WordPress 博客

WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统（CMS）来使用。它是使用PHP语言和MySQL数据库开发的。用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。WordPress有许多第三方开发的免费模板，安装方式简单易用。所以，对于初学者来说，我强烈建议使用WordPress来搭建网站。因为这是最简单易用的平台，且使用于任何开发者，用户以及自媒体作家。

04

Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView

这是一个比较常见的APP首页的结构，侧边栏+主页，侧边栏里是一些菜单，主页由底部菜单控制内容区，内容区是可滑动的子页面。整体比较舒服合理，各自为阵，却又能关联在一起，加上又是大众喜爱的Material Design风格，所以成为了当下APP首页的主流结构。

01

腾讯云服务器搭建WordPress博客

WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统（CMS）来使用。它是使用PHP语言和MySQL数据库开发的。用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。WordPress有许多第三方开发的免费模板，安装方式简单易用。所以，对于初学者来说，我强烈建议使用WordPress来搭建网站。因为这是最简单易用的平台，且使用于任何开发者，用户以及自媒体作家。

04

腾讯云服务器搭建WordPress博客

WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统（CMS）来使用。它是使用PHP语言和MySQL数据库开发的。用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。WordPress有许多第三方开发的免费模板，安装方式简单易用。所以，对于初学者来说，我强烈建议使用WordPress来搭建网站。因为这是最简单易用的平台，且使用于任何开发者，用户以及自媒体作家。

05

电商后台管理系统主页布局[通俗易懂]

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/143016.html原文链接：https://javaforall.cn

01

WordPress 初学者词汇表（术语解释）

WordPress.com是由 Automattic（发明 WordPress 的开发人员）运营的在线平台，您可以在其中免费创建基本博客（尽管您可以注册高级计划）。WordPress.com 的问题在于，您的网站在技术上由 Automattic 拥有和管理，而在网站的功能和设计方面，您的选择有限。

02

如何搭建 WordPress 博客

WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统（CMS）来使用。它是使用PHP语言和MySQL数据库开发的。用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。WordPress有许多第三方开发的免费模板，安装方式简单易用。所以，对于初学者来说，我强烈建议使用WordPress来搭建网站。因为这是最简单易用的平台，且使用于任何开发者，用户以及自媒体作家。

原 Intellij idea2017编辑

编辑器总览基础在创建和修改代码的时候，编辑器是是否有用的工具。所有的其他的编辑器也都支持书签，断点，语法高亮，代码提示，Zooming，代码折叠等。当然这里还有很多诸如宏指令，高亮TODO，代码分析、事件、快捷智能导航的高级特性。可以使用setting中的editor配置编辑器环境。也可以通过ctrl+~的方式选择更改样式、主题、快捷键等。这个编辑器是基本的，所有的语境菜单上的操作都是可用的。当然你也可以通过Window | Editor tabs上的节点来操作。活动编辑器当你打开一个文件编辑的

06

Visual Studio 智能代码插件：CodeGeeX

随着人工智能技术的不断发展，智能编程助手逐渐成为开发者们不可或缺的工具。其中，CodeGeeX作为一款专为Visual Studio设计的免费智能编程助手，凭借其强大的功能和便捷的使用体验，赢得了广大开发者的青睐。

01

Joe主题开启文章目录结构

切换到免费版本后，文章目录结构没有了。文章太长的话，翻滚有点麻烦，所以自己找了一下，加了一个。

02

专业的图像处理工具：Pixelmator Pro Mac下载

Pixelmator Pro Mac版是一款专业的图像处理工具，具有对RAW图像的卓越支持，并内置了众多效果和高质量的矢量图形，支持psD，TIFF，PNG，TGA等最流行的图像格式， BMP，JPEG，GIF和JPG-2000，支持使用图层编辑Photoshop图像，以及支持导入HEIF图像，功能强大！

03

手势魅力-设置一个触摸菜单

本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下文中的gif图所示),主要涉及的知识点有移动端三大触摸事件(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js的方法封装点击,移动,抬起功能函数,尽管移动(手机)端与pc端有很多相似之处,但还是有很多要注意的地方的,如果你想获得该Demo的源码,复制该标题后台回复[手势魅力-设置一个触摸菜单]就可以了的,初次翻译,如果有误导的地方,欢迎路过的老师,多提意见和指正,如果你想阅读英文原文,扫文末下方二维码或者跳转到指定链接就可以了的

04

伸缩侧边栏

01

Icinga Web2 v2.7.0 发布轻量级和可扩展的 web 接口

Icinga Web 2 是 Icinga 项目开发的下一代开源监控 Web 接口、框架和命令行接口，支持 Icinga 2、Icinga Core 和与 IDO 数据库兼容的任何其他监控后端。

03

WordPress免费主题：Document，让阅读变得更加方便

😁作为一个程序员，在日常的工作、生活、学习的过程中基本都有很多需要做笔记的地方；做笔记的主要目的之一是为了“温故而知新”，另一个则是为了在下一次遇到的时候，不需要再次耗费精力去找解决方法；回顾自己之前写的那个主题，不管是写还是查都不怎么方便，最终下定决心重写一个主题；以 “方便记、方便查、简约”作为设计核心；开源地址 Github：https://github.com/friend-nicen/theme-document Gitee：https://gitee.com/friend-nicen/the

03

这几个 VS Code 快捷键，请一定要用一用，可以大大提高你的编辑效率

VS Code 是编程领域非常流行的编辑器，无论是写 Vue，还是 Python、Java，亦或是写 MarkDown，我都会用它进行编辑，当然了，还会用它的 Vim 插件。写代码的时候，经常使用它来格式化代码，虽然很多操作都可以通过菜单上的按钮进行操作，但是要想提高效率，还是要牢记它的快捷键。

02

SlidingMenu使用详解

SlidingMenu 是什么 SlidingMenu 是一个强大的侧边栏导航框架，并且已经被一些比较牛的 App 使用 SlidingMenu 的主要特点 (1) 侧边栏可以是一个Layout，包含任何 View，也可以是一个 Fragment (2) 使用简单方便，支持左滑和右滑等 (3) 自定义侧边栏显示动画 SlidingMenu 常用属性介绍: menu.setMode(SlidingMenu.LEFT);//设置左滑菜单 menu.setTouchModeAbove(SlidingMen

03

使用IBM Blockchain Platform extension开发你的第一个fabric智能合约

使用IBM Blockchain Platform extension开发你的第一个fabric智能合约

02

如何将VS Code用于Python？

自从我开始使用 Python 以来，我一直在使用 Linux 操作系统和终端窗口。Nano 一直是我选择的编辑器，而且使用起来相当简单。但总有一些事情困扰着我：我认识的几乎每个开发人员都使用集成开发环境 (IDE) 来编写代码。这总是让我感到惊讶，因为当我在学校学习 C++ 时，我使用了相同的工具组合，部分原因是我买不起指导员建议的软件。最重要的是，我没有运行 Windows 的机器，而 Microsoft 没有为 Linux 提供其 IDE 的版本。

01

[WordPress主题]2019大前端dux6.0最新无限制版

DUX主题是基于WordPress程序的主题，由themebetter团队原创开发，是目前比较火的wordpress主题，和大前端主题一样比较优秀的主题还有begin知更鸟，两者功能都很多，界面也比较好看，做一个个人博客完全够用了，今天爱游分享就是大前端5.2主题，已去除域名限制。

05

使用vuepress-6小时搭建一个完全免费的个人网站

当然也可以自己写不用vuepress，自己写代码然后通过githubPages也是可以的，只是使用vuepress相对来说时间快一点，他生成的网站也是响应式的。

03

【12】2小时还你一个集打赏、评论、RSS功能于一身的个人博客

几个月前，写过几篇关于Hexo博客搭建的教程，最近几天，发现有很多读者私信我一些Hexo搭建过程中遇到的问题，重新燃起了我对Hexo博客的兴趣，于是花了一两天的时间重新将Hexo博客搭建了一下，并通过配置实现了一些附加功能，写下此篇博客，希望可以帮助读者们深入Hexo博客的使用。

03

js带模糊效果的隐藏滑动侧边栏代码教程

pushbar.js是一款带模糊效果的js隐藏滑动侧边栏插件。pushbar.js能制作上下左右四个方向的滑动侧边栏效果，并且在侧边栏菜单显示的时候，主页面会带有炫酷的模糊特效。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭