網頁Jquery下拉按鈕不起作用

我正在嘗試製作網頁的按鈕，您可以將鼠標懸停在上面，並在其旁邊會顯示鏈接和信息。網頁Jquery下拉按鈕不起作用

下面是什麼樣子的鏈接：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

（對於每個盒子和內容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; 
}

任何幫助，更好的方法來做到這一點或特定回答這個問題的鏈接將非常感激。謝謝！

來源

2016-04-04 Harry Cosslett

你的小提琴作品對我來說你的jQuery函數。 –

對不起，可能不是很清楚：p小提琴不是問題，當我嘗試將它應用於我的網頁時。我發佈的代碼來自我的頁面。 –

嘗試評論某些資產。這一個特別是'' –

<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

來源

2016-04-04 01:21:19

網頁Jquery下拉按鈕不起作用

回答

相關問題