Question

目前我正在创建包含多个图标的导航，当您点击每个图标时，会出现一个菜单中的幻灯片。到目前为止，这是我试过的javascript和css。不幸的是，当我点击我的图标时似乎没有发生任何事情

<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">

    <title>Explore Canterbury</title>

 <style>

.infoIcon {
  background-image:url(img/information.png);
  width:34px;
  height:34px;
  display: block;
}
}
    </style>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <script src="js/my-js.js"></script>

  </head>

  <body>

    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div id="navbar">
            <ul class="nav navbar-nav">
            <li><span class="LocIcon nav-toggle"></span></li>
            </ul>
          </div><!--/.nav-collapse -->

          <form class="navbar-form" role="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            </div>
          </form>

        </div><!--/.container-fluid -->
      </nav>

    </div> <!-- /container -->

      <div class="information-menu">
        <h1>Explore Canterbury</h1> 
        <p>Welcome to our website, please look around!</p>        
      </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS

.information-menu {
  position: fixed;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  background: #222;
  text-align: left;
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.information-menu.open{
  transform: translateX(0);
}

的javascript

$(function(){

    $('.nav-toggle').on('click', fuction(){
        $('.information-menu').toggleClass('open');
    });
});

Answer 1

我会像使用css-transitions那样做：

    $(function(){

    $('.nav-toggle').on('click', function(){
        $('.information-menu').slideDown(600);
    });
});

以width: 0px;

的形式从侧面开始滑动

    $(function(){

    $('.nav-toggle').on('click', function(){
      $(".information-menu").animate({width:'toggle'},350);
    });
});

小提琴：https://jsfiddle.net/L7L1eb04/1/

Answer 2

我认为主要问题只是代码中的拼写错误。

尝试更改以下行：

$('.nav-toggle').on('click', fuction(){

到

$('.nav-toggle').on('click', function(){

我没有测试您的完整代码，但代码片段似乎按预期工作。

<强>更新

作为对OP评论的回应，修改了拼写错误的原始代码如下所示。它似乎按预期工作。运行代码段并单击＆＃34;单击我！＆＃34;尝试。

＆＃13;

$(function() {

  $('.nav-toggle').on('click', function() {
    $('.information-menu').toggleClass('open');
  });
});

＆＃13;

.information-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #222;
  color: white;
  text-align: left;
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.information-menu.open {
  transform: translateX(0);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div id="navbar">
        <ul class="nav navbar-nav">
          <li><span class="LocIcon nav-toggle">Click Me!</span>
          </li>
        </ul>
      </div>

      <form class="navbar-form" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        </div>
      </form>

    </div>
  </nav>

</div>

<div class="information-menu">
  <h1>Explore Canterbury</h1> 
  <p>Welcome to our website, please look around!</p>
</div>

＆＃13;

创建一个幻灯片＆＃39;使用js和css的菜单

2 个答案: