在构建交互式前端界面时，常见的需求是实现菜单项的展开与收起功能。特别是在多级菜单结构中，当用户点击某个父级菜单项（
原始的问题场景中，开发者尝试使用一个单一的响应式变量 sub_menu_show 来控制所有子菜单的显示状态。这种方法的问题在于，当 sub_menu_show 的值发生变化时，所有绑定到该变量的子菜单都会同时更新状态，导致点击一个菜单项时，所有子菜单都展开或收起，这显然不符合预期。
为了实现精确控制，核心思路是为每个需要独立控制显示状态的子菜单维护一个独立的布尔值。
我们将采用一个对象来存储每个子菜单的显示状态，对象的键可以是子菜单的唯一标识符（例如，'profile' 或 'media'），值则是一个布尔类型，表示该子菜单是否处于显示状态。
立即学习“前端免费学习笔记（深入）”；
首先，我们需要修改模板，确保每个可点击的
<ul>
<li>菜单项</li>
<li @click="() => toggleSubMenu('profile')">个人资料
<ul :class="{ 'd-block': toggleStates['profile'] }">
<li>历史记录</li>
</ul>
</li>
<li @click="() => toggleSubMenu('media')">媒体
<ul :class="{ 'd-block': toggleStates['media'] }">
<li>照片</li>
<li>视频</li>
</ul>
</li>
</ul>关键点说明：
接下来，我们将在Vue的 setup 函数中实现状态管理和切换逻辑。我们将使用 ref 来创建一个响应式对象，用于存储所有子菜单的独立状态。
<script>
import { ref } from 'vue'
export default {
setup(){
// 使用 ref 创建一个响应式对象，用于存储每个子菜单的显示状态
// 初始时，所有子菜单都设置为隐藏 (false)
const toggleStates = ref({ profile: false, media: false });
/**
* 切换指定类型子菜单的显示状态
* @param {string} type - 子菜单的唯一标识符（如 'profile', 'media'）
*/
const toggleSubMenu = (type) => {
// 根据传入的 type 切换对应子菜单的状态
// 例如，如果 toggleStates.value['profile'] 是 false，则变为 true
toggleStates.value[type] = !toggleStates.value[type];
}
// setup 函数需要返回在模板中使用的响应式数据和方法
return {
toggleSubMenu,
toggleStates
}
}
}
</script>关键点说明：
为了让 d-block 类生效，您需要在您的CSS文件中定义它：
/* style.css 或组件内部样式 */
ul ul { /* 默认子菜单隐藏 */
display: none;
}
ul ul.d-block { /* 添加 d-block 类时显示 */
display: block;
}通过上述方法，您可以轻松地在Vue.js应用中实现复杂且精确的UI交互，确保每个组件都能按照预期独立运行。
以上就是Vue.js：精确控制点击LI时内部UL的显示样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
998
收藏
