Javascript Span元素不从jQuery运行动画

我试图通过点击一个

span

的

runmenu

类，让jQuery动画从右侧显示一个菜单，但是它不工作，我为一个

按钮创建了相同的类，它工作得很好，这里有什么问题，为什么它只对
按钮
工作


$（文档）.ready（函数（）{
$（“.runmenu”）。单击（函数（）{
$（“.menu”）.animate({
“右”：0
}, 1000);
});
});
/*全局*/
科纳蒂纳先生{
宽度：1026.66px；
}
/*结束全球*/
/*启动导航栏*/
navbar先生{
位置：相对位置；
背景：url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
背景尺寸：封面；
高度：700.531px；
溢出：隐藏；
}
.导航栏.菜单{
位置：绝对位置；
右：-200px；
宽度：200px；
高度：700px；
背景颜色：灰色；
颜色：白色；
}
.navbar.overlay{
位置：绝对位置；
背景色：rgba（0,0,0,2）；
宽度：100%；
高度：700.531px；
z指数：1；
}
.navbar.navbar_一号，
.导航栏，导航栏2{
位置：相对位置；
z指数：2；
}
.navbar.navbar\u一个h3{
浮动：左；
边际上限：0；
颜色：#FFF；
填充：20px；
文本转换：大写；
}
.navbar.navbar_一个分区{
浮动：对；
右边距：10px；
颜色：#FFF；
填充：20px；
}
.导航栏，导航栏2{
文本对齐：居中；
填充顶部：230px；
}
.navbar.navbar_两个i{
颜色：#FFF
}
.navbar.navbar_两个h1{
文本转换：大写；
颜色：#FFF；
}
.navbar.navbar_两个h3{
文本转换：大写；
颜色：#FFF
}
.navbar.navbar_两个ul{
列表样式：无；
}
.navbar.navbar_两个ul li{
宽度：110px；
背景色：rgba（81186164.8）；
-webkit边界半径：25px；
-moz边界半径：10px；
边界半径：25px；
文本对齐：居中；
颜色：#FFF；
字体系列：Arial；
字体大小：20px；
字号：600；
线高：10px；
光标：指针；
填充：20px 25px；
左边距：555px；
}
导航杆，导航杆，两个，悬停{
背景色：#51baa4；
}
navbar.navbar_2 ul li a{
颜色：#FFF；
文本装饰：无
}
/*结束导航栏*/

模板回顾

家
一般的
元素

回顾
菜单
艾蒂亚姆酒店
洛勒姆·多洛尔·埃格塔斯大家族




几个月前我也这么做了，最好的方法是在div中插入span并鼓励div

 $(".animamenu").click(function () {

        $(".animamenu").animate({
            "right": 0
        }, 1000);
    });

html:

<div>
      <i class="fa fa-bars fa-lg"></i>
    <div class="animamenu">
       <span class="runmenu">menu</span> 
    </div>
</div>


菜单
这都是关于
z-index
属性的，javascript中没有任何错误。您的
span.runmenu
无法单击，因为
navbar2
块位于
span
上方。更改css并解决问题

给予

见

预览


$（文档）.ready（函数（）{
$（'span.runmenu'）。单击（函数（）{
控制台日志（“ok”）；
$（“.menu”）.animate({
“右”：0
}, 1000);
});
});
/*全局*/
.runmenu{
z指数：999；
光标：指针；
}
科纳蒂纳先生{
宽度：1026.66px；
}
/*结束全球*/
/*启动导航栏*/
navbar先生{
位置：相对位置；
背景：url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
背景尺寸：封面；
高度：700.531px；
溢出：隐藏；
}
.导航栏.菜单{
位置：绝对位置；
右：-200px；
宽度：200px；
高度：700px；
背景颜色：灰色；
颜色：白色；
}
.navbar.overlay{
位置：绝对位置；
背景色：rgba（0,0,0,2）；
宽度：100%；
高度：700.531px；
z指数：1；
}
.navbar.navbar_一号，
.导航栏，导航栏2{
位置：相对位置；
z指数：2；
}
.navbar.navbar\u一个h3{
浮动：左；
边际上限：0；
颜色：#FFF；
填充：20px；
文本转换：大写；
}
.navbar.navbar_一个分区{
浮动：对；
右边距：10px；
颜色：#FFF；
填充：20px；
}
.导航栏，导航栏2{
文本对齐：居中；
填充顶部：230px；
z指数：0；
}
.navbar.navbar_两个i{
颜色：#FFF
}
.navbar.navbar_两个h1{
文本转换：大写；
颜色：#FFF；
}
.navbar.navbar_两个h3{
文本转换：大写；
颜色：#FFF
}
.navbar.navbar_两个ul{
列表样式：无；
}
.navbar.navbar_两个ul li{
宽度：110px；
背景色：rgba（81186164.8）；
-webkit边界半径：25px；
-moz边界半径：10px；
边界半径：25px；
文本对齐：居中；
颜色：#FFF；
字体系列：Arial；
字体大小：20px；
字号：600；
线高：10px；
光标：指针；
填充：20px 25px；
左边距：555px；
}
导航杆，导航杆，两个，悬停{
背景色：#51baa4；
}
navbar.navbar_2 ul li a{
颜色：#FFF；
文本装饰：无
}
/*结束导航栏*/


家
一般的
元素

回顾
菜单
艾蒂亚姆酒店
洛勒姆·多洛尔·埃格塔斯大家族





.runmenu {
  z-index: 999;
  cursor: pointer;
}

.navbar .navbar_two {
  z-index: 0;
}