jQuery不能与其他文件一起工作
jQuery not working with other files
我刚刚开始学习jQuery,我相信我已经遇到了一个障碍。本质上,我有一个代表可点击区域的内部。所以我试着用这个代码:
$(document).ready(function(){
$('#side_menu_icon').click(function(){
$('#side_menu').slideToggle('slow');
});
});
其中#side_menu_icon
是可点击的区域,#side_menu
只是一个临时的宽度、高度和颜色占位符。默认情况下,我已经设置这个<div>
显示:无;因为我看到的例子做了同样的事情,假设jQuery函数将其设置为可见。当我单击该区域时,什么也没有发生,我尝试将#side_menu_icon
附加到<img>
和<div>
上。我想我可能不太明白文档是如何从另一个文档继承代码的所以我也会把它包括进去:
<head>
<link rel="stylesheet" type="text/css" href="style/main.css"></link>
<script type="text/javascript" src="js/jquery-1.10.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Test Blog Site</title>
</head>
main.js是调用上述jQuery函数的文件。
感谢您的时间,我希望这些信息足以解决问题。
编辑:精简版HTML:
<body>
<div id="top_bar">
<h1 style="padding-left:1em;">Title</h1>
</div>
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
<div id="side_menu">
</div>
<div id="post_holder">
<img style="margin-bottom:-5px" src="images/post-collection-top-transparent.gif" />
<div id="post_collection">
<!-- stuff -->
</div>
<img src="images/post-collection-bottom-transparent.gif" />
</div>
</body>
相关章节
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
和
<div id="side_menu">
</div>
CSS: body {
font-family: "Courier New";
background-image: url("../images/background-1728x1080.jpg");
background-size:100%;
background-attachment:fixed;
margin: 0;
}
img {
max-width: 100%;
width: auto;
height: auto;
outline-offset:0px;
}
h1,h2,h3,h4,h5,h6,div,p{
padding:0;
margin:0;
}
.post{
width:90%;
padding-left: 5%;
}
#top_bar{
width: 100%;
z-index:99;
position: fixed;
font-size:15px;
background-image: url("../images/item-background.jpg");
background-size:6%;
color: white;
}
#side_menu_icon{
border: 4px solid #6e3b10;
margin-top: 50px;
position:fixed;
right:0;
background-image: url("../images/item-background.jpg");
}
#post_holder{
z-index:98;
text-align:center;
margin:0;
position:relative;
}
#post_collection{
background-image: url("../images/post-background.gif");
background-size: 100%;
max-width: 900px;
text-align:left;
margin: auto;
}
#side_menu{
height:500px;
width:100px;
background-color:yellow;
display:none;
}
相关部分是#side_menu和#side_menu_icon。
我找到了我的问题的解决方案,一些CSS干扰了jQuery的正常工作能力。我得想个办法解决这个问题
相关文章:
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- document.title函数可以't设置它与php一起工作
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 非常简单的js测试;Don’不要和Minko一起工作
- 无法使我的文本参数与我的查询一起工作
- 为什么Angularjs验证don't与输入[type=“number”]一起工作
- 无法使vash 0.8.0与express 4.12.3一起工作
- 如何使Angular JS控制器与指令一起工作
- 无法使autocompletion与bootstrap和php代码点火器一起工作
- 注入的元素和jQuery脚本.如何让他们一起工作
- 两个独立工作的javascript函数,但不能一起工作
- 角度和砖石一起工作
- Node http-proxy-middleware 不能与本地服务器一起工作
- jQuery脚本不想一起工作
- page.js使examples/hash与hashbang:true一起工作
- javascript使jquery倒计时与UTC时间一起工作
- jQuery.not()选择器无法与类一起工作
- Rails3-可排序列表不能与wysihtml5一起工作
- 替换匹配函数给出了未定义的错误,但它与替换一起工作
- 按钮上的数据加载消息无法与ajax调用一起工作