左侧菜单导航折叠后文字没有完全隐藏

这个问题可能是由于CSS样式设置不正确导致的。可以尝试添加以下CSS代码来解决这个问题：

.navbar-nav .nav-item .nav-link .collapse {
  display: none;
}

这将隐藏折叠后的文字。如果还有其他问题，请提供更多的细节和代码，我可以更好地帮助您解决问题。

相关问题

vue左侧菜单栏折叠

在Vue中实现左侧菜单栏的折叠效果，你可以使用Vue的条件渲染和动态绑定class的功能来实现。

以下是一个简单的示例，展示了如何在Vue中实现左侧菜单栏的折叠效果：

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <div :class="{'menu-collapsed': isCollapsed}">
      <!-- 左侧菜单栏的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false, // 菜单栏是否折叠的状态
    };
  },
  methods: {
    toggleMenu() {
      this.isCollapsed = !this.isCollapsed; // 点击按钮切换菜单栏折叠状态
    },
  },
};
</script>

<style>
.menu-collapsed {
  width: 60px; // 折叠状态下的宽度
}
</style>

html 中echarts实现可折叠3级导航左侧菜单

您好！对于您的问题，可以通过以下步骤实现可折叠3级导航左侧菜单：

1. 引入 echarts.js 和 echarts-gl.js

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.1.4/echarts-gl.min.js"></script>

2. 编写 HTML 结构

<div class="sidebar">
  <ul class="nav">
    <li>
      <a href="#">一级菜单</a>
      <ul class="sub-nav">
        <li>
          <a href="#">二级菜单</a>
          <ul class="sub-sub-nav">
            <li><a href="#">三级菜单</a></li>
            <li><a href="#">三级菜单</a></li>
          </ul>
        </li>
        <li><a href="#">二级菜单</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单</a></li>
  </ul>
</div>

3. 编写 CSS 样式

.sidebar {
  width: 200px;
  background-color: #f5f5f5;
  padding: 10px;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;
  padding: 5px;
  color: #333;
}

.sub-nav {
  display: none;
}

.sub-nav.active {
  display: block;
}

.sub-nav .sub-sub-nav {
  display: none;
}

.sub-nav .sub-sub-nav.active {
  display: block;
}

4. 编写 JavaScript 代码

var navItems = document.querySelectorAll('.nav > li > a');

navItems.forEach(function(item) {
  item.addEventListener('click', function(e) {
    e.preventDefault();

    var subNav = item.nextElementSibling;
    var isActive = subNav.classList.contains('active');

    hideAllSubNavs();
    
    if (!isActive) {
      subNav.classList.add('active');
    }
  });
});

function hideAllSubNavs() {
  var subNavs = document.querySelectorAll('.sub-nav, .sub-sub-nav');

  subNavs.forEach(function(subNav) {
    subNav.classList.remove('active');
  });
}

5. 使用 echarts 绘制折叠菜单

var chart = echarts.init(document.querySelector('.sidebar'));

var option = {
  series: {
    type: 'treemap',
    data: [{
      name: '一级菜单',
      value: 1,
      children: [{
        name: '二级菜单',
        value: 1,
        children: [{
          name: '三级菜单',
          value: 1
        }, {
          name: '三级菜单',
          value: 1
        }]
      }, {
        name: '二级菜单',
        value: 1
      }]
    }, {
      name: '一级菜单',
      value: 1
    }]
  },
  seriesLayoutBy: 'rect',
  visualDimension: 9,
  visualMin: 10,
  leafDepth: 2,
  roam: false,
  label: {
    show: true
  },
  upperLabel: {
    show: true
  }
};

chart.setOption(option);

chart.on('click', function(params) {
  var name = params.name;
  var item = document.querySelector('.nav a[data-name="' + name + '"]');
  
  if (item) {
    var subNav = item.nextElementSibling;
    var isActive = subNav.classList.contains('active');

    hideAllSubNavs();
    
    if (!isActive) {
      subNav.classList.add('active');
    }
  }
});

这样就可以实现可折叠3级导航左侧菜单了。希望能对您有所帮助！