87,996
社区成员
发帖
与我相关
我的任务
分享siblings 失效
HELP~~
这段siblings一直slideup不上去，如果换成dropdown class是生效的，不知道问题出在哪里...还请大哥们帮忙看看
siblings(".dropdown-list").slideUp();
<script type="text/javascript">
$(function () {
$(".dropdown").click(function () { //click on dropdown class will triggerblow script
$(this).next().stop().slideToggle().siblings(".dropdown-list").slideUp();
$(this).toggleClass("show")
})
})
</script>
HTML
<!--Define Doc Type-->
<!DOCTYPE html>
<!--Define Language-->
<html lang="en">
<head>
<!-- UTF Code -->
<meta charset="utf-8">
<!-- Meta info for search engine -->
<meta name="description" content="CorpHomePage1.0">
<meta name="author" content="11">
<!-- HTML Title -->
<title>Home Page</title>
<!-- Link icons -->
<link rel="icon" href="images/favicon.png">
<!-- Setting up an Apple Touch Icon for your website will over-all boost the visual optimization of your website for iOS users,-->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<!-- Link css file -->
<!-- <link rel="stylesheet" type="text/css" href="css/400.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="css/dropdown.css"> -->
<link rel="stylesheet" type="text/css" href="css/navigition.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- <link rel="stylesheet" type="text/css" href="css/500.css">
<link rel="stylesheet" type="text/css" href="css/style-responsive.css"> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<style>
body {
background-color: rgba(204, 204, 202, 0.897);
}
</style>
</head>
<body>
<div class="container">
<div class="homeh1">
<h1>Welcome To Corp Home PAGE</h1>
</div>
<div class="navi-div">
<ul class="navi-ul">
<li><a href="index.html">Home</a></li>
<li><a href="">My Career</a></li>
<li><a href="">Calendar</a></li>
<li><a href="">Mail Box</a></li>
<li><a href="">Setting</a></li>
<li><a href="">Language</a></li>
<div class="dropdown-div">
<div class="dropdown">Setting</div>
<ul class="dropdown-list">
<li><a href="">Language</a></li>
<li><a href="">Info</a></li>
</ul>
</div>
<div class="dropdown-div">
<div class="dropdown">Support</div>
<ul class="dropdown-list">
<li><a href="contact.html">Contact Form</a></li>
<li><a href="">Mail us</a></li>
</ul>
</div>
</ul>
</div>
<div class="homeimg">
<img src="images/company/corp3.jpg" width="720px" height="540px" alt="homeimg1"> <!-- inset image div -->
</div>
<div class="homevedio">
<video src="images/engineering.mp4" width="304px" height="540px" controls="controls">Your browser does not
support the video TAB</video> <!-- inset vedio div -->
</div>
<div class="homesearch">
<input class="homesearch-input" placeholder="You can find more info here" type="search" name="homesearch">
<button class="searchbutton">search</button>
<!-- creat a search bar and button -->
</div>
<div class="register">
<ul class="register">
<li><a href="./login.html">Login</a></li>
<li><a href="./register.html">Register</a></li>
<li><a href="">Reset PWD</a></li>
<li><a href="./contact.html">Contact us</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
$(".dropdown").click(function () { //click on dropdown class will triggerblow script
$(this).next().stop().slideToggle().siblings(".dropdown-list").slideUp();
$(this).toggleClass("show")
})
})
</script>
</html>
index.css
/********************************************************
*********** background picture**************************
********************************************************/
body {
background-image: url(../images/back3.jpg);
background-position: center;
justify-items: baseline;
}
/********************************************************
*********** IMG&Vedio css**************************
********************************************************/
.homeimg {
position: absolute;
top: 85px;
left: 200px;
right: auto;
bottom: auto;
}
.homevedio {
position: absolute;
top: 85px;
left: 940px;
right: auto;
bottom: auto;
}
/********************************************************
*********** ul&h1 css**************************
********************************************************/
ul li:last-child {
border-bottom: none;
/* background-color: yellowgreen; */
}
.homeh1 h1 {
margin: 0;
display: block;
position: relative;
left: 180px;
top: 0px;
width: fit-content;
color: rgb(148, 121, 223);
}
/********************************************************
*********** search function css**************************
********************************************************/
.homesearch-input {
top: 20px;
left: 800px;
position: absolute;
text-align: center;
/* display: block; */
width: 300px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.5;
color: rgb(80, 20, 245);
background-color: rgb(93, 221, 238);
background-image: none;
border: 3px solid rgb(113, 27, 226);
border-radius: 4px;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.searchbutton {
position: absolute;
text-align: center;
color: #fff;
background-color: #4ECDC4;
border-color: #38cfc5;
display: inline-block;
top: 15px;
left: 1105px;
margin: 0px 0px 8px;
padding: 6px 12px;
/* margin-bottom: 10; */
font-size: 20px;
font-weight: 400;
line-height: 1.5;
text-align: center;
vertical-align: middle;
user-select: none;
background-image: none;
border: 1px solid transparent; /*set to transparent style*/
border-radius: 4px;
touch-action: manipulation; /*Only scrolling and continuous zooming are allowed*/
cursor: pointer; /*set cursor to pointer, change cursor style*/
background: linear-gradient(90deg, rgb(50, 146, 235), rgb(36, 33, 197), rgb(155, 70, 211)); /* use linear-gradie style set a colorful background */
}
.searchbutton:hover {
background-color: #4ECDC4;
color: rgb(226, 75, 75);
}
/********************************************************
*********** Register css **************************
********************************************************/
.register ul li {
color: rgb(136, 135, 222);
z-index: 999; /*set to the top*/
float: left;
text-align: center;
list-style: none;
}
.register ul {
position: absolute;
float: left;
left: 230px;
top: 40px;
}
.register ul li:hover {
background-color: rgb(0, 225, 255);
}
ul {
width: auto;
height: auto;
position: relative;
}
ul li a {
float: none;
padding: 15px;
}
navigation.css
/********************************************************
*********** Dropdown Function css **************************
********************************************************/
div.dropdown.show{
color: white;
background: url(../images/arrow2.png) no-repeat 108px center;
background-size: 17px 16px;
background-color: rgb(247, 9, 9);
}
.dropdown {
display: block;
width: 120px;
height: 40px;
padding: 4px;
font-weight: bold;
color: white;
text-align: center;
text-transform: uppercase; /* control all words type to Uppercase */
text-decoration: none; /* Move out tab 'a' underline */
border-bottom: 1px solid rgb(98, 236, 63);
border-width: 3px;
margin-top: 5px;
cursor: pointer;
background: url(../images/arrow1.png) no-repeat 108px center;
background-size: 17px 16px;
background-color: rgb(58, 58, 155);
}
.dropdown-list{
display: none;
}
.dropdown:hover, dropdown:active {
background-color: rgb(9, 247, 68);
}
/********************************************************
*********** Navigation Function css **************************
********************************************************/
.navi-div {
position: absolute;
z-index: 999;
top: 80px;
background-color: rgb(58, 58, 155) ;
}
.navi-div ul li a:hover, a:active {
background-color: rgb(58, 58, 155);
}
.navi-div ul {
list-style-type: none; /* remove list number */
margin: 0;
padding: 0;
/* width: 128px; */
height: 100%;
/* position: fixed; */
overflow: auto; /* allow navi roll */
position: relative;
}
.navi-div ul li a {
display: block;
width: 120px;
height: 40px;
padding: 4px;
background-color: rgb(58, 58, 155);
font-weight: bold;
color: white;
text-align: center;
text-transform: uppercase; /* control all words type to Uppercase */
text-decoration: none; /* Move out tab 'a' underline */
border-bottom: 1px solid rgb(98, 236, 63);
border-top: 1px solid rgb(98, 236, 63);
border-width: 3px;
text-align: center;
/* margin-top: 5px; */
}
...全文
请发表友善的回复…
发表回复
