javascript - 单击同一类型时关闭一种类型的下拉列表

标签 javascript jquery html css twitter-bootstrap

我是 jQuery 和 javascript 的新手，我需要一些帮助...

  $(document).ready(function () {
    $('.dropdown-submenu .active-dropdown').on("click", function (e) {
      $(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  });
body {
  padding-bottom: 40px;
  color: #5a5a5a;
}

.navbar-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}

.carousel {
  height: 500px;
  margin-bottom: 60px;
}

.carousel-caption {
  z-index: 10;
}

.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}

.featurette-divider {
  margin: 80px 0;
}

.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

  .arrow-up {
    margin: 4px;
    float: right;
  }

  #active {
    color: #fff;
    background-color: #080808;
  }

  .clickCursor {
    cursor: pointer !important;
  }

  a.btn.btn-lg.btn-warning.errorright {
    margin-left: 300px;
    width: 255px;
  }

  a.btn.btn-lg.btn-warning.errorleft {
    margin-right: 300px;
    margin-top: -117px;
  }

  .carousel-indicators .active {
    width: 25px;
    height: 25px;
    margin-bottom: -10px;
    border-radius: 15px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .carousel-indicators li {
    width: 25px;
    height: 25px;
    margin-bottom: -10px;
    border-radius: 15px;
    margin-left: 5px;
    margin-right: 5px;
    }

    .carousel-caption {
      text-align: left;
    }

    p.left{
      text-align: left;
      margin-left: 10px;
    }

    p.right{
      text-align: right;
    }

    h2.featurette-heading.trends{
      margin-top: -40px;
    }

    a.scroll.no-decoration:hover,
    a.scroll.no-decoration:active,
    a.scroll.no-decoration:focus {
      text-decoration: none;
      color: #337ab7;
    }

    .all-width {
      width: 100%;
    }

    .dropdown-toggle {
      font-size: 20px;
    }

    .dropdown-submenu {
      position: relative;
  }
  
    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -1px;
  }

    .nav>li>a {
      display: inline-block;
    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../favicon.ico">

  <title>Pixel Pro | Tudo sobre jogos</title>

  <!-- BS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- FA -->
  <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

  <!-- Custom style and JS for this template -->
  <link href="css/styles.css" rel="stylesheet">
  <!-- Scripts -->

  <!-- Smooth Scroll -->
  <script>
    $(document).ready(function () {
      // Add smooth scrolling to all links
      $("a.scroll").on('click', function (event) {

        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();

          // Store hash
          var hash = this.hash;

          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 800, function () {


          });
        } // End if
      });
    });
  </script>

</head>

<body>
  <header>
    <a id="pagetop"></a>
    <div class="navbar-wrapper">

      <nav class="navbar navbar-inverse navbar-static-top">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
            aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
          <a class="navbar-brand" id="active" href="/">Pixel Pro</a></li>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">

            <!-- Dropdown without any subdropdowns
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sobre [Test] <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">Indie <i class="fa fa-globe" aria-hidden="true"></i></li>
                <li><a href="#">Minecraft</a></li>
                <li><a href="#">Terraria</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">FPS <i class="fa fa-shield" aria-hidden="true"></i></li>
                <li><a href="#">Counter-Strike: Global Offensive</a></li>
              </ul>
            -->

            <li class="dropdown">
              <a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sobre <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">Indie <i class="fa fa-globe" aria-hidden="true"></i></li>
                <li class="dropdown-submenu">
                  <a class="clickCursor active-dropdown">Minecraft <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Topic 1</a></li>
                    <li><a href="#">Topic 2</a></li>
                  </ul>
                </li>
                <li class="dropdown-submenu">
                  <a class="clickCursor active-dropdown">Terraria <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Topic 3</a></li>
                    <li><a href="#">Topic 4</a></li>
                  </ul>
                </li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">FPS <i class="fa fa-shield" aria-hidden="true"></i></li>
                <li class="dropdown-submenu">
                  <a class="clickCursor active-dropdown">Counter Strike: Global Offensive <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Topic 5</a></li>
                    <li><a href="#">Topic 6</a></li>
                  </ul>
                </li>

            </li>
            </ul>
            <!-- A third dropdown (which isn't necessary in this dropdown)
                        <li class="dropdown-submenu">
                          <a class="clickCursor active-dropdown">Another dropdown <span class="caret"></span></a>
                          <ul class="dropdown-menu">
                            <li><a href="#">3rd level dropdown</a></li>
                            <li><a href="#">3rd level dropdown</a></li>
                          </ul>
                        </li>
                      -->
          </ul>
          </li>
          </ul>

          </li>
          </li>
          </ul>
        </div>
    </div>
    </div>



  </header>

  <main>
    <div id="GamesCarousel" class="carousel slide" data-ride="carousel">
      <!-- To stop the automatic carousel, remove data-ride="carousel" -->
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#GamesCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#GamesCarousel" data-slide-to="1"></li>
        <li data-target="#GamesCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Minecraft</h1>
              <p>Minecraft é um jogo de construção de sandbox criado pela Mojang AB, fundada por Markus Persson (Notch). A jogabilidade
                envolve jogadores que interagem com o mundo do jogo colocando e quebrando vários tipos de blocos em um ambiente
                tridimensional.
              </p>
              <p><a class="btn btn-lg btn-warning all-width" href="/subjects/minecraft/index.html" role="button">Saber mais</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Terraria</h1>
              <p>Começa por construir abrigos básicos, encontra e pega minérios e outros recursos. Descobre e cria até 300 armas
                de variedades mágicas, variadas e de corpo a corpo, bem como armaduras, e usa-as para combater centenas de
                inimigos diferentes. Em breve, estarás a ir frente a frente com qualquer dúzia de chefes enormes.</p>
              <p><a class="btn btn-lg btn-warning all-width" href="/subjects/terraria/index.html" role="button">Saber mais</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Counter Strike: Global Offensive</h1>
              <p>Counter-Strike: Global Offensive (CS:GO) é um jogo de tiro em primeira pessoa online desenvolvido pela Valve
                Corporation e pela Hidden Path Entertainment, sendo uma sequência de Counter-Strike: Source. É o quarto título
                principal da franquia.</p>
              <p><a class="btn btn-lg btn-warning all-width" href="/subjects/csgo/index.html" role="button">Saber mais</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#GamesCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#GamesCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="container marketing">
      <h2 class="featurette-heading trends">Melhores <span class="text-muted">tópicos</span></h2>

      <div class="row">
        <div class="col-lg-4">
          <img class="img-circle" src="img/minecraft_index.png" alt="Generic placeholder image" width="140" height="140">
          <h2 class="left">Minecraft</h2>
          <p class="left">Minecraft é um jogo de construção de sandbox criado pela Mojang AB, fundada por Markus Persson (Notch). A jogabilidade
            envolve jogadores que interagem com o mundo do jogo colocando e quebrando vários tipos de blocos em um ambiente
            tridimensional.
          </p>
          <p><a class="btn btn-default" href="/subjects/minecraft/index.html" role="button">Saber Mais</a></p>
        </div>
        <!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="img/terraria_index.jpg" alt="Generic placeholder image" width="140" height="140">
          <h2 class="left">Terraria</h2>
          <p class="left">Começa por construir abrigos básicos, encontra e pega minérios e outros recursos. Descobre e cria até 300 armas
            de variedades mágicas, variadas e de corpo a corpo, bem como armaduras, e usa-as para combater centenas de inimigos
            diferentes. Em breve, estarás a ir frente a frente com qualquer dúzia de chefes enormes.</p>
          <p><a class="btn btn-default" href="/subjects/terraria/index.html" role="button">Saber Mais</a></p>
        </div>
        <!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="img/csgo_index.jpg" alt="Generic placeholder image" width="140" height="140">
          <h2 class="left">Counter Strike: Global Offensive</h2>
          <p class="left">Counter-Strike: Global Offensive (CS:GO) é um jogo de tiro em primeira pessoa online desenvolvido pela Valve Corporation
            e pela Hidden Path Entertainment, sendo uma sequência de Counter-Strike: Source. É o quarto título principal
            da franquia.</p>
          <p><a class="btn btn-default" href="/subjects/csgo/index.html" role="button">Saber Mais</a></p>
        </div>
      </div>

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading">Porque deves escolher-<span class="text-muted">nos?</span></h2>
          <p class="lead">Nós estamos a desenvolver um website muito elegante e moderno sem nenhum anúncio e feito com muito amor com toda
            a informação precisa e necessária, no entanto, temos apenas Minecraft, Terraria e CS: GO por enquanto.</p>
        </div>
        <div class="col-md-5">
          <img class="featurette-image img-responsive center-block" src="/img/heart.gif" alt="Generic placeholder image">
        </div>
      </div>

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7 col-md-push-5">
          <h2 class="featurette-heading">Qual o <span class="text-muted">conteúdo</span> atual?</h2>
          <p class="lead">Por agora, temos 3 matérias: Minecraft, Terraria, e CS:GO.</p>
        </div>
        <div class="col-md-5 col-md-pull-7">
          <img class="featurette-image img-responsive center-block img-circle" src="/img/game.gif" alt="Generic placeholder image">
        </div>
      </div>

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading">Quem é o <span class="text-muted">dono</span> deste website?</h2>
          <p class="lead">O dono deste website chama-se Pedro, e é do sexo masculino. Este curte jogar jogos e também percebe um bocadinho
            de programação, então, decidiu criar este website para ajudar todos os gamers e jogadores.</p>
        </div>
        <div class="col-md-5">
          <img class="featurette-image img-responsive center-block img-circle" src="img/ExplodingPedro.jpg" alt="Generic placeholder image">
        </div>
      </div>

      <footer>
        <hr class="featurette-divider">
        <a href="#pagetop" class="scroll no-decoration"><i class="fa fa-arrow-circle-up arrow-up" aria-hidden="true"></i><p class="pull-right">Voltar para o topo</a></p>
        <p>&copy; 2017 Pedro Ferreira &middot;</p>
      </footer>
  </main>
  </div>
</body>
</html>

基本上我想，当有人点击下拉子菜单主题时，一切都保持原样，但是，当有人点击另一个下拉子菜单时，所有其他下拉子菜单应该消失。 如果你得到答案，请告诉我，我真的需要帮助。

-- 编辑--

我还需要另一件事的帮助，但那件事也是脚本编写的问题，它必须通过下拉子菜单查看，所以我将在这里编辑。

我想，当有人点击任何显示子下拉列表 (a.active-dropdown) 的按钮时，如果子下拉列表已经可见，则它会变得不可见。

最佳答案

我已经简化了您的代码，因此它主要只包含代码的布局，而没有太多无关的页面内容。然后在 JavaScript 部分，您会看到我添加了以下代码行:

$(this).closest('nav').find('.dropdown-submenu > ul').hide();

这会找到任何下拉子菜单并在打开您单击的菜单之前隐藏它们。

我将其添加为点击事件处理程序的第一行，因为它需要在打开新菜单之前隐藏打开的菜单，否则它会打开菜单然后立即将其隐藏。

$(document).ready(function(){
    $('.dropdown-submenu .active-dropdown').click(function(e){
        $(this).closest('nav').find('.dropdown-submenu > ul').hide();
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });
});
.navbar-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
}
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
}
.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
}
.navbar-wrapper .navbar .container {
    width: auto;
}

@media (min-width: 768px) {
    .navbar-wrapper .container {
        padding-right: 15px;
        padding-left: 15px;
    }
    .navbar-wrapper .navbar {
        padding-right: 0;
        padding-left: 0;
    }
}

.dropdown-toggle {
    font-size: 20px;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.nav > li > a {
    display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- BS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- FA -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <header>
        <div class="navbar-wrapper">
            <nav class="navbar navbar-inverse navbar-static-top">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars" style="color:#fff;"></i>
                    </button>
                    <a class="navbar-brand" id="active" href="#">Pixel Pro</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sobre <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-header">Indie <i class="fa fa-globe" aria-hidden="true"></i></li>
                                <li class="dropdown-submenu">
                                    <a class="clickCursor active-dropdown">Minecraft <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Topic 1</a></li>
                                        <li><a href="#">Topic 2</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown-submenu">
                                    <a class="clickCursor active-dropdown">Terraria <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Topic 3</a></li>
                                        <li><a href="#">Topic 4</a></li>
                                    </ul>
                                </li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">FPS <i class="fa fa-shield" aria-hidden="true"></i>
                                </li>
                                <li class="dropdown-submenu">
                                    <a class="clickCursor active-dropdown">Counter Strike: Global Offensive <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Topic 5</a></li>
                                        <li><a href="#">Topic 6</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>
</body>
</html>

关于javascript - 单击同一类型时关闭一种类型的下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45683955/

上一篇：Javascript:如何确定是否 promise 一个功能？

下一篇：javascript - Chrome 刷新 "resubmit form data"提交 Null

相关文章：

javascript - 如果注册则登录用户(Firebase facebook/google auth)

Javascript将 "Mc"之后的下一个字符大写

javascript - Express.js - 监听关机

按钮上的 jQuery 在追加后单击不起作用

html - 如何使用 CSS 在表格的每个单元格中获取一个值？

html - 在 angularjs 和 ionic-v1 中的一个公共(public)标题栏中只显示一个图标

html - 图片链接到 Twitter 个人资料

javascript - 单击另一个链接时使用javascript触发链接

javascript - 自举 |损坏的事件、下拉菜单和幻灯片放映

javascript - IE9 jQuery 图像大小？

©2024 IT工具网  联系我们