Question

我试图用这种方法用侧边栏隐藏div：

<div>

边栏听取了这些规则，但似乎内容正在消失，但<div>实际上仍然存在。可能是这样的，因为带有侧边栏的<template> <div> <sidebar /> <main-content/> </div> </template>实际上是一个组件。但后来我不知道如何解决它。

我的页面：

<template>
<div class="sidebar">
    <div class="sidebar-header">
      <div class="logo"><img src="../../../components/img/logo.svg"/></div>
      <a href="#" id="title">System</a>
    </div>
    <ul class="sidebar-nav">
      <!--<li><a href="#">Home</a></li>-->
      <!--<li><a href="#">Popular</a></li>-->
      <!--<li><a href="#">News and events</a></li>-->
      <!--<li><a href="#">Pages</a></li>-->
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/users.svg" />Users</a>
            <ul>
              <li class="nav-item"><a href="#">Import</a></li>
              <li class="nav-item"><a href="#">Invitation</a></li>
            </ul>
      </li>
      <!--<li><a href="#">Organisation</a></li>-->
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/polls.svg" />Poll</a>
      </li>
    </ul>
  </div>
</template>

侧栏组件：

select DIRNAME from PROJECTINFO where NLS_UPPER(NAME, 'NLS_SORT =  
SCHINESE_PINYIN_M') = '中文版测试'

Answer 1

您的组件样式很可能是scoped。请参阅https://drive.google.com/file/d/1ve1n4yeHzutTspIVwVRu6jT1vY2RQvvs/view?usp=drivesdk它的工作原理。

一个可行的解决方案是将样式块移动到组件本身：

<template>
<div class="sidebar">
    <div class="sidebar-header">
      <div class="logo"><img src="../../../components/img/logo.svg"/></div>
      <a href="#" id="title">System</a>
    </div>
    <ul class="sidebar-nav">
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/users.svg" />Users</a>
            <ul>
              <li class="nav-item"><a href="#">Import</a></li>
              <li class="nav-item"><a href="#">Invitation</a></li>
            </ul>
      </li>
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/polls.svg" />Poll</a>
      </li>
    </ul>
  </div>
</template>

<style scoped>
/* For mobile phones: */
@media (max-width: 576px) {
 .sidebar {
  display: none !important;
 }
}

/* For tablets */
@media (max-width: 768px) {
 .sidebar {
  display: none !important;
 }
}
</stlyle>

另一个解决方案是声明非scoped style块，这通常会出现在App.vue文件中。

Vue.js：无法使用带有CSS媒体查询的侧边栏隐藏div

1 个答案: