Question

我被困在一个地方......我得到了这段代码：link

侧导航栏的动画几乎就像我想要的那样，但是当我点击一个选项时，它会打开所有这些选项。我想在下一页获得类似效果：link

$(document).ready(function() {
  $('.interfejs, .procesor, .dane, .grafika, .linux, .sieci').click(function() {
    $('.dropdown-content').toggleClass('visible-dropdown');
  })
})

/*===Site nav content===*/

.nav-header {
  width: 100%;
  height: 65px;
  position: relative;
  text-align: center;
}

.nav-header h2 {
  color: #fcfcfc;
  font-size: 33px;
  font-weight: 800;
  letter-spacing: 1px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 13px;
  background-color: #011018;
  z-index: 1;
  width: auto;
  display: inline-block;
  text-shadow: 0px 0px 4px black;
}

.nav-header:after {
  content: '';
  background-color: #f5f5f5;
  height: 1px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.5px;
}

.nav-menu {
  position: relative;
}

.nav-menu a {
  padding: 15px 8px 15px 32px;
  margin-left: 20px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 1px;
  color: #818181;
  background-color: #011018;
  display: block;
  transition: 0.3s;
  position: relative;
}

.nav-menu a:hover {
  background-color: #212E35;
  color: #f5f5f5;
  letter-spacing: 2px;
  font-weight: 500;
}

.fa-angle-double-down {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
}


/*===dropdown-content===*/

.dropdown-content {
  text-decoration: none;
  color: #fff;
  height: 0;
  transition: 0.3s height;
  background-color: #081d2a;
  box-shadow: inset 4px 4px 10px #05141D;
  margin-left: 20px;
}

.visible-dropdown {
  height: 100px;
}

.dropdown-content li {
  padding: 2px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="site-nav">
  <header class="nav-header">
    <h2>Spis treści</h2>
  </header>
  <section class="nav-menu">
    <a href="#" class="interfejs"><span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span>Interfejsy</a>
    <ul class="dropdown-content">
      <li>jeden</li>
      <li>dwa</li>
      <li>jeden</li>
      <li>dwa</li>
    </ul>
    <hr>
    <a href="#" class="procesor">Procesory<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
    <ul class="dropdown-content">
      <li>jeden</li>
      <li>dwa</li>
      <li>jeden</li>
      <li>dwa</li>
    </ul>
    <hr>
    <a href="#" class="dane">Przechowywanie danych<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
    <ul class="dropdown-content">
      <li>jeden</li>
      <li>dwa</li>
      <li>jeden</li>
      <li>dwa</li>
    </ul>
    <hr>
    <a href="#" class="grafika">Grafika<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
    <ul class="dropdown-content">
      <li>jeden</li>
      <li>dwa</li>
      <li>jeden</li>
      <li>dwa</li>
    </ul>
    <hr>
    <a href="#" class="linux">Linux<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
    <ul class="dropdown-content">
      <li>jeden</li>
      <li>dwa</li>
      <li>jeden</li>
      <li>dwa</li>
    </ul>
    <hr>
    <a href="#" class="sieci">Sieci komputerowe<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
    <ul class="dropdown-content">
      <li>jeden</li>
      <li>dwa</li>
      <li>jeden</li>
      <li>dwa</li>
    </ul>
  </section>
  <!-- <button class="hamburger">
				<div class="bar1"></div>
				<div class="bar2"></div>
				<div class="bar3"></div>
			</button> -->
</nav>

Answer 1

您只需要打开点击的那个并关闭其中任何一个。以下将这样做：

    <script>
        $(document).ready(function(){
          $('.interfejs, .procesor, .dane, .grafika, .linux, .sieci').click(function(){
            // First close the one that's open
            $('.dropdown-content').removeClass('visible-dropdown');
            // Then open the one that's clicked on
            $(this).next('.dropdown-content').addClass('visible-dropdown');
          })
        })
    </script>

Answer 2

Gerard的答案是正确的，虽然它只会更加清晰，而且可扩展性更强，只针对一个类...而不是每个菜单类。

$ findstr /R /N "^" TEST.txt | find /C ":"
find: '/C': No such file or directory
find: ':': No such file or directory

https://jsfiddle.net/q5qv6ejj/

如何制作下拉列表并推送下面的内容？

2 个答案: