Question

遇到麻烦。任何帮助，将不胜感激。我试图添加＆＃34;幻灯片＆＃34;通过使用Id＆＃34; lm＆＃34;到左菜单div的类似乎没有为我工作。

＆＃13;

$(document).ready(function() {});

$("#toggle", ).click(function() {
  $("#lm").addClass("slide");
});

＆＃13;

  .left-menu {
  height: 55%;
  width: 45%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  list-style: none;
  border-right: 2px solid #fff;
  background-color: #000;
  z-index: 1000;
}

.slide {
  -webkit-transform: translate(-20, 0);
  -moz-transform: translate(-20em, 0);
  -o-transform: translate(-20em, 0);
  -ms-transform: translate(-20em, 0);
  transform: translate(-51em, 0);
  -webkit-transition: 10s;
  -moz-transition: 10s;
  -o-transition: 10s;
  transition: 10s;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="container-fluid header">
  <div class="text-vertical-center apple-effect">
    <a id="toggle" href="#">[sv]</a> </div>
</header>
<div class="container-fluid">
  <div class="left-menu" id="lm" role="navigation">
    <a class="nav-link" href="#">Home</a>
  </div>

＆＃13;

Answer 1

您的语法错误，请点击$(document).ready()中的FUNCTION，并且此行$("#toggle",).click()中的脚本中也存在逗号（，）。删除它。

试试这个：

$(document).ready(function(){
    $("#toggle").click(function(){
       $("#lm").addClass("slide");
    });
});

Answer 2

试试这个。你的jquery代码有语法错误＆amp;没有正确的格式改变如下，

为什么？

您应该将$(document).ready(function() {//click function})内的点击功能添加到外部，而不是正确关闭})
css slide课程未正确关闭}
$("#toggle,")它是一个无效的选择器。删除,中的$("#toggle,")

注意不要忘记添加jquery库链接

工作示例

$(document).ready(function() {
$("#toggle").click(function() {
$("#lm").addClass("slide");
});
})

.left-menu {
  height: 55%;
  width: 45%;
  position: absolute;
  top: 100px;
  left: 0;
  padding: 0;
  list-style: none;
  border-right: 2px solid #fff;
  background-color: #000;
  z-index: 1000;
}

.slide {
  -webkit-transform: translate(-20, 0);
  -moz-transform: translate(-20em, 0);
  -o-transform: translate(-20em, 0);
  -ms-transform: translate(-20em, 0);
  transform: translate(-51em, 0);
  -webkit-transition: 10s;
  -moz-transition: 10s;
  -o-transition: 10s;
  transition: 10s;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="container-fluid header">
  <div class="text-vertical-center apple-effect">
    <a id="toggle" href="#">[sv]sxx</a> </div>
</header>
<div class="container-fluid">
  <div class="left-menu" id="lm" role="navigation">
    <a class="nav-link" href="#">Home</a>
  </div>

Answer 3

删除该逗号并检查以下代码。

＆＃13;

((Game)Gdx.app.getApplicationListener).setScreen(myScreen)

＆＃13;

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#lm").addClass("slide");
  });
})

＆＃13;

.left-menu {
  height: 55%;
  width: 45%;
  position: absolute;
  top: 100px;
  left: 0;
  padding: 0;
  list-style: none;
  border-right: 2px solid #fff;
  background-color: #000;
  z-index: 1000;
}

.slide {
  -webkit-transform: translate(-20, 0);
  -moz-transform: translate(-20em, 0);
  -o-transform: translate(-20em, 0);
  -ms-transform: translate(-20em, 0);
  transform: translate(-51em, 0);
  -webkit-transition: 10s;
  -moz-transition: 10s;
  -o-transition: 10s;
  transition: 10s;
  }

＆＃13;

Answer 4

你可以使用纯javascript而不是jquery。请参阅以下链接

Menu slide with different animation

Answer 5

在document.ready（）函数中添加click事件。并删除＆＃39;，＆＃39;在#toggle之后。

$(document).ready(function(){
$("#toggle").click(function(){
   $("#lm").addClass("slide");
});

}）;

Answer 6

这是因为你正在使用即将被弃用的jquery点击功能，请使用

$("#toggle").on('click', function(){
   $("#lm").addClass("slide");
});

单击锚点时使用jquery添加类

6 个答案: