-1
ボタンをクリックしたときにdivを開きたいのですが、ボタンの上にカーソルを置いたときにdivが表示されているときに開きますが、クリックすると開く必要があります。前にJavaスクリプトを使用していたので、ボタンをクリックするために必要なものだと思います。下のコードを使用して、誰かが私の手助けをすることができますか？私は（何のボタンと何のdiv）私はあなたの質問と一緒に掲示コードが本当にあなたの問題を指摘しない操作をナビゲーションバーからdivを開く
<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>
https://jsfiddle.net/yvkdt64o/2/