Question

我有一个使用HTML，CSS和Bootstrap构建的标头。使用JQuery中的.slideToggle()，我想为它添加一个滑动面板。

供参考：我的所有代码均低于+ screenshot of header (panel hidden) + screenshot of header (panel shown)

基本上，我想点击#products以显示#panel-products（隐藏display: none;）并向下滑动。再次点击#products时，#panel-products应该向上滑动并消失。然而，这一切都没有发生。我在其他网站上看过，当使用.slideToggle()时，它会检测隐藏的元素并采取相应的行动。

我的HTML：

<HTML>
<head>
    <title>Website</title>
    <link rel="stylesheet" href="Bootstrap(files)/bootstrap.min.css"/>
    <link rel="stylesheet" href="Reproduce.css"/>
    <script type="text/javascript" src="JQuery(files)/jquery.js"></script>
    <script type="text/javascript" src="Reproduce.js"></script>
</head>
<body>
<header class="container">
    <div class="row">
        <h1 class="col-sm-4">WEBSITE</h1>
        <nav class="col-sm-8">
            <a><span id="login">Login</span></a>
            <a><span id="join">Join</span></a>
            <a><span id="products">Products</span><br>
                <span id="panel-products">
                    <span id="computers">Computers</span><br>
                    <span id="tablets">Tablets</span><br>
                    <span id="phones">Phones</span>
                </span>
            </a>
            <a><span id="about">About</span></a>
        </nav>
    </div>
</header>
</body>
</HTML>

我的CSS：

header .row {
    background-color: black;
    display: flex;
}

header h1 {
    position: relative;
    bottom: 5px;
    font-size: 20px;
}

header nav {
    font-size: 18px;
    display: flex;
    justify-content: flex-end;
}

header nav > a {
    margin-top: 13px;
    margin-left: 50px;
}

header #panel-products {
    font-size: x-small;
    display: none;
}

我的JS：

$(document).ready(function () {
    "use strict";
    $("#products").click(function () {
        $("#panel-products").slideToggle('slow');
    });
});

Answer 1

此Bootstrap演示使用：

.navbar-right代替justify-content:flex-end
data-toggle="dropdown"代替.slideToggle()
glyphicon代替实体和GIF。

＆＃13;

<!doctype html>
<html>
<head>
<title>Website</title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<style>

</style>
</head>

<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSite</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
      <li class="dropdown">
        <a id='products' class="dropdown-toggle" data-toggle="dropdown" href="#">Products
        <span class="caret"></span></a>
        <ul id='product-panel' class="dropdown-menu">
          <li><a href="#"><span class="glyphicon glyphicon-console"></span> Computer</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-blackboard"></span> Tablet</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-phone"></span> Phone</a></li>
        </ul>
      </li>
      </ul>
       <ul class="nav navbar-nav navbar-right">
       <li><a href="#"><span class="glyphicon glyphicon-star"></span> About</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> 
<script>


</script>
</body>
</html>

＆＃13;

以完整页面模式查看片段，然后使用开发人员工具 F12 或 Ctrl + Shift + M

.slideToggle（使用Jquery）不工作？

1 个答案: