网页Jquery下拉按钮不起作用
Webpage Jquery dropdown buttons not working
我正在尝试为网页制作按钮,您可以将鼠标悬停在该网页上,旁边会出现一个"类似下拉框"的框,其中包含链接和信息。
以下是它的链接:https://jsfiddle.net/kvbvLy4d/
在网页上实现这一点后,我让按钮停止工作。这就是我所拥有的:
(我已经删除了不相关的代码以最小化长度-如果你需要我发布完整的脚本,请告诉我)
html
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="resources/scripts/jquery-1.12.2.min.js"></script>
<script src="resources/scripts/jquery.cycle.all.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
$("#box1, #content1").on("mouseenter", function() {
$("#content1").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content1").is(":hover"))
$("#content1").fadeOut(); //hide();
});
$("#box2, #content2").on("mouseenter", function() {
$("#content2").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content2").is(":hover"))
$("#content2").fadeOut(); //hide();
});
</script>
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
</div>
</body>
</html>
css
(除位置外,每个盒子和内容分区相同)
#box {
position: absolute;
top: 23vw;
width: 10vw;
height: 10vw;
background-color: blue;
}
#content {
position: absolute;
top: 23vw;
left: 11vw;
width: 10vw;
height: 10vw;
background-color: red;
display: none;
}
任何帮助、更好的方法或专门回答这个问题的链接都将不胜感激。谢谢
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="resources/scripts/jquery-1.12.2.min.js"></script>
<script src="resources/scripts/jquery.cycle.all.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
$("#box1, #content1").on("mouseenter", function() {
$("#content1").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content1").is(":hover"))
$("#content1").fadeOut(); //hide();
});
$("#box2, #content2").on("mouseenter", function() {
$("#content2").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content2").is(":hover"))
$("#content2").fadeOut(); //hide();
});
});
</script>
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
</div>
</body>
</html>
在document.ready 中添加jquery函数
相关文章:
- JS动态添加字段-删除按钮不起作用
- 一键启动按钮不起作用
- 带有向下钻取的 Amchart 图表工作正常,但“后退”按钮不起作用
- 为什么不'这个HTML按钮不起作用
- 使用javascript后,提交按钮不起作用
- 镀铬延长件内部的聚合物纸按钮不起作用
- 我的提交按钮不起作用
- AngularJs:多次点击同一个按钮不起作用
- Ruby on Rails - 引导旋转木马按钮不起作用
- 为什么我的开关按钮不起作用
- 无法弄清楚为什么提交按钮不起作用
- 使用动画时Jquery后退按钮不起作用
- 禁用浏览器中的后退按钮不起作用
- 打印按钮不起作用
- jQuery-关闭按钮不起作用
- HTML按钮不起作用
- 清除Javascript/HTML中的画布按钮不起作用
- '有角度的靠背'返回页首按钮不起作用
- onclick() jQuery/JavaScript 显示饼图的按钮不起作用
- 网页Jquery下拉按钮不起作用