抱歉这个菜鸟问题，我的第一个网站。
我希望当单击“.button”div 时，“.container”div 内的所有 div 淡出或隐藏，但它似乎不起作用。我更愿意将 js 保存在一个单独的文件中。
HTML
<!DOCTYPE html>
<html>
<head>
<title>MAIN</title>
<link rel='stylesheet' type='text/css' href='style.css' />
<script type='text/javascript' src='script.js'> </script>
</head>
<body>
<div class="container">
<div class="top">
MENU
</div>
<div class="button">
^ ^ ^
</div>
</div>
</body>
CSS
.top {
/* Border */
border: 5px solid gray;
width: 100px;
background-color: black;
/*Positioning*/
margin-left: 25%;
margin-right: 25%;
top: 10px;
left: 0px;
position: absolute;
/*Text*/
text-align: center;
font-family: Arial;
font-weight: bold;
font-size: 20px;
color: white;
}
.container {
/*Border*/
border: 10px solid gray;
width: 200px;
height: 200px;
background-color: black;
/*Positioning*/
margin-left: auto;
margin-right: auto;
position: relative;
}
.button {
/*Border*/
border: 2px solid gray;
background-color: black;
width: 98%;
/*Positioning*/
margin-top: 90%;
margin-left: auto;
margin-right: auto;
/*Text*/
text-align: center;
font-family: Arial;
font-size: 15px;
color: white;
}
.button:hover {
color: red;
font-weight: bold;
}
JavaScript
$(document).ready(function() {
$('.button').click(function() {
$('.container').hide('fast');
});
});
最佳答案
如果你想隐藏容器中的所有div，你可以使用:
$('.container>div').hide('fast');
因此只有容器的直接子元素 div 会被隐藏。 将 div 隐藏在隐藏的 div 中是没有用的:)
$(document).ready(function() {
$('.button').click(function() {
$('.container>div').hide('fast');
});
});.top {
/* Border */
border: 5px solid gray;
width: 100px;
background-color: black;
/*Positioning*/
margin-left: 25%;
margin-right: 25%;
top: 10px;
left: 0px;
position: absolute;
/*Text*/
text-align: center;
font-family: Arial;
font-weight: bold;
font-size: 20px;
color: white;
}
.container {
/*Border*/
border: 10px solid gray;
width: 200px;
height: 200px;
background-color: black;
/*Positioning*/
margin-left: auto;
margin-right: auto;
position: relative;
}
.button {
/*Border*/
border: 2px solid gray;
background-color: black;
width: 98%;
/*Positioning*/
margin-top: 90%;
margin-left: auto;
margin-right: auto;
/*Text*/
text-align: center;
font-family: Arial;
font-size: 15px;
color: white;
}
.button:hover {
color: red;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>MAIN</title>
<link rel='stylesheet' type='text/css' href='style.css' />
<script type='text/javascript' src='script.js'> </script>
</head>
<body>
<div class="container">
<div class="top">
MENU
</div>
<div class="button">
^ ^ ^
</div>
</div>
</body>关于jquery - 在一个 div 中隐藏多个 div - JQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38757805/