我想在点击按钮时打开div，当我将鼠标悬停在按钮上时div打开，但我需要在点击它时打开它。我之前从未使用过java脚本，所以我猜猜这就是我点击按钮所需要的。有人可以使用下面的代码帮助我做到这一点。我希望我不必改为整个网站进行该操作
<html lang ="en-US">
<head>
<link rel="stylesheet" type="text/css" href="CSS/main1.css" media="all">
<link rel="stylesheet" type="text/css" href="CSS/slide.css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+" "+nhour+":"+nmin+":"+nsec+ap+"";
}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
</head>
<body>
<style>
body {
padding: 0;
margin: 0;
}
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
position: fixed;
width:100%;
height: 100%;
top:0px;
left:0px;
z-index:0;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.box{
background-color:#ffe680;
width:895px;
height:500px;
position:fixed;
margin-top:154px;
margin-left:288px;
z-index:1;
}
h1 {
color:white;
text-shadow: 3px 2px red;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
z-index:1;
}
.dropdown-content {
display: none;
position: fixed;
background-color: rgba(0,0,0,0.4);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-left:200px;
margin-top:96px;
width:800;
height:500;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: inline;
width: 800px;
height: 200px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #F28686;
}
setTimeout( function(){$('box').hide();} , 4000);
</style>
<div class="dropdown">
<button class="dropbtn" style="margin-left:208px;">News</button>
<div class="dropdown-content"style="margin-left:325;">
<h1 style="margin-left:50;">Cooperate news</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-
style:none;">
<li> <a href="http://www.molex.com/molex/home"> *How connected cars are turning into revenue-generating machines - August 29, 2016</a></li>
<li><a href="#">*Delphu, Mobileye Join Forces to Develop Selfdrive System - August 23,2016</a></li>
<li> <a href="#">*MIT Spinoff to Market Breakthrough Batteries by 2017 - August 22,2016</a></li>
<li> <a href="#">*Cisco Cuts Workforce by 7 percent to Speed Transition to Software - August 18, 2016</a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">Chengdu News</h1>
<ul style="margin-left: 55%; margin-top:-396;float:left; line-height:2;list-style:none;">
<li>
<a href="#">* 10 Year Service Award ceremony</a></li>
<li><a href="#">* PDP Training</a></li>
<li> <a href="#">* ISO 27001 project Kick-off</a></li>
<li> <a href="#">* 2016 Internship Program update</a></li>
<li><a href="#">* WBC Update-- First Reading Salon</a></li>
<li style=" margin-top:190px; margin-left:180px;"><a href="http://www.molex.com/molex/home" style="color:white;">more>>></a></li>
</ul>
</div>
</div>
<div class="dropdown" style="margin-left:110;">
<button class="dropbtn"style="margin-left:250px;">Notice & Policy</button>
<div class="dropdown-content"style="margin-left:215;">
<h1 style="margin-left:50;">Cooperate news</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none;">
<li> <a href="http://www.molex.com/molex/home"> *How connected cars are turning into revenue-generating machines - August 29, 2016</a></li>
<li><a href="#">*Delphu, Mobileye Join Forces to Develop Selfdrive System - August 23,2016</a></li>
<li> <a href="#">*MIT Spinoff to Market Breakthrough Batteries by 2017 - August 22,2016</a></li>
<li> <a href="#">*Cisco Cuts Workforce by 7 percent to Speed Transition to Software - August 18, 2016</a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">Chengdu News</h1>
<ul style="margin-left: 55%; margin-top:-396;float:left; line-height:2;list-style:none;">
<li>
<a href="#">* 10 Year Service Award ceremony</a></li>
<li><a href="#">* PDP Training</a></li>
<li> <a href="#">* ISO 27001 project Kick-off</a></li>
<li> <a href="#">* 2016 Internship Program update</a></li>
<li><a href="#">* WBC Update-- First Reading Salon</a></li>
<li style=" margin-top:190px; margin-left:180px;"><a href="http://www.molex.com/molex/home" style="color:white;">more>>></a></li>
</ul>
</div>
</div>
<div class="dropdown" style="margin-left:220;">
<button class="dropbtn"style="margin-left:292px;">Workflow & MIS</button>
<div class="dropdown-content"style="margin-left:105;">
<h1 style="margin-left:50;">Online Workflow:</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none">
<li> <a href="#"> MII</a></li>
<li><a href="#">APS WF Reports</a></li>
<li> <a href="#">PAR Apply (TIS)</a></li>
<li> <a href="#">PAR Applcation (CCS)</a></li>
<li> <a href="#">PAR Application (DSS)<a></li>
<li> <a href="#">Company Chop Application<a></li>
<li> <a href="#">Facility Maintenance<a></li>
<li> <a href="#">Cycle Count Review<a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">MIS:</h1>
<ul style="margin-left: 55%; margin-top:-270;float:left; line-height:2;list-style:none;">
<li>
<a href="#">User ID Application</a></li>
<li><a href="#">Meeting room Booking Guide</a></li>
<li> <a href="#">How to apply mass SAS</a></li>
<li> <a href="#">Office 365 -email- retention policy</a></li>
<li><a href="#">How to report con-call issue or problem to Level 3</a></li>
</ul>
</div>
</div>
<div class="dropdown" style="margin-left:410;">
<button class="dropbtn"style="width:120px;height:95px;margin-left:254px;margin-top:0px;background-color:#e6e6e6;"></button>
<img src="molex.png" alt="molex" height="30px" width="100px" style="margin-top: 45; position:fixed; z-index:1;margin-left:268;">
</div>
<div class="dropdown" style="margin-left:451;">
<button class="dropbtn"style="margin-left:334px;">Canteen</button>
<div class="dropdown-content"style="margin-left:-126;">
<h1 style="margin-left:50;">Menu Today</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none; color:white;">
<img src="logo update.jpg">
<li> Lunch:</li>
<li >Dinner:</li>
<li > Midnight:</li>
</ul>
<h1 style="margin-left:466; margin-top:-56; font-size:28px;">Canteen Committee:</h1>
<h1 style="margin-left:465; margin-top:-102px;float:left;">Advices:</h1>
</div>
</div>
<div class="dropdown" style="margin-left:562;">
<button class="dropbtn"style="margin-left:375px;">Activity & Organization</button>
<div class="dropdown-content"style="margin-left:-237;">
<h1 style="margin-left:50;">Activity</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none">
<li> <a href="#">Family day</a></li>
<li><a href="#">Photography Contest</a></li>
<li> <a href="#">Talent show</a></li>
<li> <a href="#">Singing Contest</a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">Organization</h1>
<ul style="margin-left: 55%; margin-top:-144;float:left; line-height:2;list-style:none;">
<li>
<a href="#">Walfare Committee</a></li>
<li><a href="#">Badminton Club</a></li>
<li> <a href="#">Photography Club</a></li>
<li> <a href="#">Riding Club</a></li>
<li><a href="#">Dancing Club</a></li>
<li> <a href="#">Women's Business Committee (WBC)</a></li>
<li> <a href="#">Corporate Social Responsibility (CSR)</a></li>
</ul>
</div>
</div>
<div class="dropdown" style="margin-left:672;">
<button class="dropbtn"style="margin-left:417px;">Culture</button>
<div class="dropdown-content"style="margin-left:-347;">
<h1 style="margin-left:50;">MBM Column</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none">
<li> <a href="#">Introduction of MBM</a></li>
<li><a href="#">MBM Materials</a></li>
<li> <a href="#">MBM in Chengdu</a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">Molex Chengdu</h1>
<ul style="margin-left: 448px; margin-top:-114px;float:left; line-height:2;list-style:none;">
<li>
<a href="#">Vision</a></li>
<li><a href="#">Newsletter</a></li>
<li> <a href="#">10 Year Anniversary Magazine</a></li>
<li><a href="等等等等等等.htm" target='_blank'
title="Click here to open a Word document">
Click here to open a Word document</a></li>
</ul>
</div>
</div>
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<img src="1.jpg" alt="molex" height="100%" width="100%">
</div>
</li>
<li><span>Image 01</span>
<div>
<img src="2.jpg" alt="molex" height="100%" width="100%">
</div></li>
<li><span>Image 01</span>
<div>
<img src="3.jpg" alt="molex" height="100%" width="100%">
</div></li>
<li>
<span>Image 01</span>
<div>
<img src="1.jpg" alt="molex" height="100%" width="100%">
</div>
</li>
</ul>
</div>
<h1 style="position:fixed;z-index:1; margin-top:40%;margin-left:30%;"><div id="clockbox" style=""> </div></h1>
<script>
= 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
var today = new Date();
document.getElementById('time').innerHTML=today;
</script>
</body>
</html>
答案 0 :(得分：0)
与您的问题一起发布的代码并没有真正指出您的问题（什么按钮和什么div），但div与click上的简单开放javascript将是
如果div默认为display: none
$(document).ready(function() {
$('.button').click(function() {
$('div').fadeIn(); //could be a .show() or .css("display", "block")
});
});
如果它们是您.preventDefault()
$(document).ready(function(e) {
e.preventDefault();
$('.button').click(function() {
$('div').fadeIn(); //could be a .show() or .css("display", "block")
});
});
答案 1 :(得分：0)
一种可能的方法是通过CSS实现悬停效果和通过JS实现点击行为，如下所示：
$(document).ready(function(){
$('.my_button').click(function() {
if ( $('.my_tooltip').css('display') === 'block' ) {
$('.my_tooltip').css('display','block');
}
});
});.my_button {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.my_tooltip {
display: none;
background-color: Wheat;
min-width: 160px;
margin-top: 10px;
width: 300px;
padding: 20px;
}
.my_button:hover {
background-color: #F28686;
}
.my_button:hover + .my_tooltip{
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
<button class="my_button">Here</button>
<div class="my_tooltip">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor, dui eu maximus maximus, lacus nulla ornare magna, sit amet ullamcorper enim sapien eget felis. Nam aliquet ultricies eros aliquam pellentesque.</p>
</div>
</div>