网页 Jquery 下拉按钮不起作用答案

【问题标题】：Webpage Jquery dropdown buttons not working网页 Jquery 下拉按钮不起作用
【发布时间】：2016-04-04 09:21:19
【问题描述】：

我正在尝试为网页制作按钮，您可以将鼠标悬停在该网页上，然后会在其旁边出现一个“下拉赞”框，其中包含链接和信息。

在网页中实现此功能后，按钮停止工作。这就是我所拥有的：

（我已删除不相关的代码以最小化长度 - 如果您需要我发布完整的脚本，请告诉我）

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

（除了位置之外，每个框和内容 div 都相同）

#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;
}

非常感谢任何帮助、更好的方法或指向专门回答此问题的问题的链接。谢谢！

【问题讨论】：

你的小提琴适合我。
对不起，可能不是很清楚：p 小提琴不是问题，当我尝试在我的网页中应用它时。我发布的代码来自我的页面。
尝试注释掉某些资产。这个特别<script src="resources/scripts/jquery-1.12.2.min.js"></script>
还是不行，完整的代码有帮助吗？
为什么那个页面上有多个 jQuery 版本？

标签： javascript jquery html css

【解决方案1】：

<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函数

【讨论】：