Question

我目前正在开发一个网站来测试我的django技能，而我的HTML技能达不到标准。这可能是一个非常简单的问题，但是如何默认情况下关闭边栏？我尝试查看其他问题，但在我的方案中它们不能解决我的问题。附带说明一下，我在here上添加了侧边栏。

HTML

String(format:)

CSS：

totalPriceLabel.text = String(format: "%.2f", price)

Answer 1

$('#sidebarCollapse').click(function(){
	$('#sidebar').toggleClass('active');
})

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
  display: flex;
  align-items: stretch;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #7386D5;
  color: #fff;
  transition: all 0.3s;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
  margin-left: -100px;
}

#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
  display: none;
}

#sidebar.active .sidebar-header strong {
  display: block;
}

#sidebar ul li a {
  text-align: left;
}

#sidebar.active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar.active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar.active ul ul a {
  padding: 10px !important;
}

#sidebar.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

#sidebar .sidebar-header {
  padding: 20px;
  background: #6d7fcc;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: #7386D5;
  background: #fff;
}

#sidebar ul li a i {
  margin-right: 10px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #fff;
  background: #6d7fcc;
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #6d7fcc;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #7386D5;
}

a.article,
a.article:hover {
  background: #6d7fcc !important;
  color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  width: 100%;
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    margin-left: -80px !important;
  }

  .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }

  #sidebar.active {
    margin-left: 0 !important;
  }

  #sidebar .sidebar-header h3,
  #sidebar .CTAs {
    display: none;
  }

  #sidebar .sidebar-header strong {
    display: block;
  }

  #sidebar ul li a {
    padding: 20px 10px;
  }

  #sidebar ul li a span {
    font-size: 0.85em;
  }

  #sidebar ul li a i {
    margin-right: 0;
    display: block;
  }

  #sidebar ul ul a {
    padding: 10px !important;
  }

  #sidebar ul li a i {
    font-size: 1.3em;
  }

  #sidebar {
    margin-left: 0;
  }

  #sidebarCollapse span {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <!-- Sidebar  -->
  <nav id="sidebar" class="active">
    <div class="sidebar-header">
      <h3>Bootstrap Sidebar</h3>
      <strong>BS</strong>
    </div>

    <ul class="list-unstyled components">
      <li class="active">
        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
          <i class="fas fa-home"></i>
          Home
        </a>
        <ul class="collapse list-unstyled" id="homeSubmenu">
          <li>
            <a href="#">Home 1</a>
          </li>
          <li>
            <a href="#">Home 2</a>
          </li>
          <li>
            <a href="#">Home 3</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class="fas fa-briefcase"></i>
          About
        </a>
        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
          <i class="fas fa-copy"></i>
          Pages
        </a>
        <ul class="collapse list-unstyled" id="pageSubmenu">
          <li>
            <a href="#">Page 1</a>
          </li>
          <li>
            <a href="#">Page 2</a>
          </li>
          <li>
            <a href="#">Page 3</a>
          </li>
        </ul>
      </li>
    </ul>

  </nav>
  
  <!-- Page Content  -->
  <div id="content">

    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">

        <button type="button" id="sidebarCollapse" class="btn btn-info">
          CLICK ME
        </button>
      </div>
    </nav>

    <main role="main" class="container">
      <div class="row">
        <div class="col-md-12">
          
          <div class="alert alert-{{ message.tags }}">
            message
          </div>
          
          <div ml-3 mr-3>
            content
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

您可以将'active'类添加到#sidebar中，并在页面加载时隐藏。

我注意到您缺少这个至关重要的JQuery代码段，该代码段可切换一个类以触发显示/隐藏：

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });
});

然后我添加了此css规则...它们的左边距为-250px，但是使用它似乎太多了，因此我将其减小为-100px

#sidebar.active {
  margin-left: -100px;
}

HTML侧栏默认关闭

1 个答案: