如何在HTML中隐藏div元素？附示例代码处理方案

嘿，针对你问的如何隐藏HTML里的div元素，结合你给出的导航菜单代码，我整理了几种实用的方法，从静态到动态控制都有，按需选择就行：

一、用CSS控制（最推荐，符合样式与结构分离的最佳实践） #

这是前端隐藏元素的首选方式，灵活性强，便于维护。

1. 隐藏整个导航菜单容器 #

如果你想把最外层的.navigation-menu整个藏起来，可以写这样的CSS：

/* 彻底移除元素，不占用页面布局空间（最常用） */
.navigation-menu {
  display: none;
}

/* 可选：元素仍保留占位，只是视觉上不可见 */
.navigation-menu {
  visibility: hidden;
}

/* 可选：元素透明，仍占位，适合做过渡动画 */
.navigation-menu {
  opacity: 0;
  transition: opacity 0.3s ease;
}

2. 隐藏特定的子菜单项 #

比如你代码里带.visible类的子div，另外注意：你代码里的id="more-hd more-vis"是无效的，HTML的id不能包含空格，建议改成class="more-hd more-vis"，之后可以这样写CSS：

/* 隐藏所有带.visible类的子项 */
.navigation-menu .visible {
  display: none;
}

/* 隐藏指定class的元素（修正后的） */
.navigation-menu .more-hd {
  display: none;
}

3. 应急用内联CSS（不推荐长期用） #

如果只是临时测试，可以直接在元素上加style属性：

<!-- 隐藏整个导航 -->
<div class="navigation-menu w-32 d-flex flex-row" style="display: none;">
  <!-- 隐藏单个子项 -->
  <div class="visible" style="display: none;"><a href="#">Раздел1</a></div>
  <!-- 其他子项... -->
</div>

4. 如果你用的是Bootstrap（看类名大概率是） #

直接用Bootstrap预定义的.d-none类就行，兼容性拉满：

<div class="navigation-menu w-32 d-flex flex-row d-none">

二、用HTML5的hidden属性（简单直接） #

给元素加hidden属性，浏览器会默认应用display: none的样式：

<!-- 隐藏整个导航 -->
<div class="navigation-menu w-32 d-flex flex-row" hidden>
<!-- 隐藏单个子项 -->
<div class="visible" hidden><a href="#">Раздел1</a></div>

⚠️ 注意：如果有自定义CSS覆盖了hidden的默认样式，可能需要用!important调整优先级。

三、用JavaScript动态控制（适合交互场景） #

如果需要根据用户操作（比如点击按钮展开/收起菜单）来切换隐藏状态，用JS最方便：

// 隐藏整个导航菜单
const navMenu = document.querySelector('.navigation-menu');
navMenu.style.display = 'none';

// 切换导航的显示/隐藏（推荐用CSS类配合）
// 先定义CSS类：.hidden { display: none !important; }
navMenu.classList.toggle('hidden');

// 隐藏所有带.visible类的子项
const visibleItems = document.querySelectorAll('.navigation-menu .visible');
visibleItems.forEach(item => item.style.display = 'none');

内容的提问来源于stack exchange，提问作者mex111