我是javascript的新手并尝试用jquery制作手风琴,但它似乎改变了div的背景颜色,无论css中背景颜色的设置是什么,手风琴似乎都没有响应。< / p>
这是html代码
<!doctype html>
<html>
<head>
<title>dreampage </title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
</head>
<body>
<div class="newsbackground">
<div class="newsfeed">
这是我操纵成为手风琴的div
<div class="fake_background_post">
<h1 class="poster">
<p class="post_text">Share your feeling to us! </p>
</h1>
</div>
<div class="post_panel">
<form action="index.php" method="get" name="post">
<img class="upload_video_and_picture" src="./img/logo/camera.png" />
<p class="upload_video_and_picture_post_text"> <b>Upload Pictures or Video </b> </p>
<textarea placeholder="say something!!!" class="post_content" name="post_content" cols="60%" > </textarea>
<div class="feeling">
<p class="feeling_text">FEELING!!! </p>
<div class="feeling_logo">
<img class="happy" src="./img/logo/happy-ticon.png" />
<img class="excited" src="./img/logo/excited.png" />
<img class="sad" src="./img/logo/sad-ticon.png" />
<img class="mad" src="./img/logo/mad-ticon.png" />
<img class="bored" src="./img/logo/bored-ticon.png" />
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(".post").accordion ({
animate: 1500,
active: 1,
coolapsible: true,
event: "click",
heightstyle: "content",
});
</script>
</body>
</html>
这是css代码
* {margin: 0px;
padding; 0px;
font-family:comic sans ms;
}
.post_content {
border: 1px solid #472b1d;
background-color: #ebe7db;
color: #472b1d;
width: 99%;
}
.post_panel {
position: relative;
top: 10px;
left: 0px;
height: 200px;
width: 87.5%;
background-color: #d2c195;
margin-bottom: 50px;
}
.post_panel img {
position:relative;
width: 30px;
height: 20px;
}
.upload_video_and_picture {
position:relative;
top: 8px;
left: 10px;
}
.upload_video_and_picture_post_text {
position:relative;
top: -20px;
left: 50px;
}
.feeling {
position:relative;
top: 8px;
left: 10px;
}
.feeling img {
position:relative;
top: -21px;
left:100px;
}
this is the the css code where the background color doesn't seems to respond
.post {
position: relative;
top: 20px;
left: 220px;
padding-bottom: -200px;
margin-bottom: 120px;
width: 48%;
background-color: #d2c195;
}
.post > .fake_background_post {
background-color: #d2c195;
}
.post_text {
position: relative;
top: -23px;
left: 110px;
font-size: 70%;
# background-color: #d2c195;
}
.fake_background_post {
position: relative;
width: 100%;
height: 70px;
height: 33px;
left: 0px;
top: 00px;
background-color: #d2c195;
margin-bottom: 10px;
border: 2px solid #472b1d;
border-radius: 20px;
transition: 0.5s;
}
.fake_background_post:hover {
background-color: #472b1d;
color: #d2c195;
}