我有几个菜单，点击后会向下滑动以显示一些内容。 我的问题是，我希望顶部的选项可以向上滑动而不是向下滑动。
我的菜单代码
<div class="additional-navigation-wrapper">
<div class="additional-navigation">
<a class="border-bottom-white padding-level-one inactive additional-nav-info1" href="javascript:void(0);">
<h4>info</h4>
<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" />
<span class="clearboth"></span>
</a>
<div class="additional-nav-info-wrapper1">
<div class="additional-nav-info-inner1" style="display: none;">
<ul>
<h3>Some information</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tristique nisi et diam sagittis, scelerisque lacinia justo dictum. Maecenas neque dolor, sodales vel dolor eget, scelerisque molestie tellus. Aenean ut tristique quam. Nullam id convallis augue. Duis ut sem sed lorem tempor fermentum eget mattis ligula. Mauris cursus, dolor quis pellentesque porta, lacus ipsum ornare metus, nec volutpat arcu justo id turpis. Nunc tempus libero non lacus sagittis, nec condimentum nulla fringilla. Duis id ultrices velit. Nunc at sem quis mauris commodo tempor. Phasellus sit amet est rhoncus ipsum egestas varius quis et quam. Nulla in risus sit amet quam vulputate dapibus et non elit. Cras facilisis congue odio, sit amet posuere metus eleifend sed.
</p>
</ul>
</div>
</div>
</div>
<div class="additional-navigation-wrapper">
<div class="additional-navigation">
<a class="border-bottom-white padding-level-one inactive additional-nav-info2" href="javascript:void(0);">Lorem ipsum
<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" />
<span class="clearboth"></span>
</a>
<div class="additional-nav-info-wrapper2">
<div class="additional-nav-info-inner2" style="display: none;">
<ul>
Praesent tempor eleifend nibh, nec rutrum est tristique at. Nulla fermentum posuere posuere. Suspendisse potenti. Phasellus dapibus tristique urna, quis eleifend quam dapibus vel. Sed tempor ipsum ipsum, a tristique est tincidunt ac. Curabitur eu erat semper purus lacinia dignissim. Proin pretium hendrerit nisl, vitae ultricies erat adipiscing vitae. Aliquam scelerisque nisl sit amet molestie euismod.
</ul>
</div>
</div>
</div>
<div class="additional-navigation">
<a class="border-bottom-white padding-level-one inactive additional-nav-info3" href="javascript:void(0);">Lorem ipsum
<img class="nav-arrow no-action inactive floatright" src="images/nav-arrow-white.png" />
<span class="clearboth"></span>
</a>
<div class="additional-nav-info-wrapper3">
<div class="additional-nav-info-inner3" style="display: none;">
<ul>
Suspendisse potenti. Nulla facilisi. Curabitur volutpat quam ac pretium varius. Vivamus et commodo sapien. Praesent eu pulvinar neque. Etiam faucibus sapien sit amet odio adipiscing vestibulum. Aliquam in elit quis augue iaculis dictum id vel lacus. Curabitur vel ligula eget enim imperdiet dapibus id non lacus. Phasellus nec massa quis neque fermentum convallis ac at dolor. Nulla lacus velit, feugiat ut scelerisque sit amet, semper sit amet nibh. Ut auctor justo ligula, ac aliquam massa dictum a. Phasellus sed sapien tincidunt, dignissim turpis vitae, pretium elit. Nulla dictum ac diam id lobortis.
</ul>
</div>
</div>
</div>
<div class="additional-navigation">
<a class="border-bottom-white padding-level-one inactive additional-nav-info4" href="javascript:void(0);">Lorem ipsum
<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" />
<span class="clearboth"></span>
</a>
<div class="additional-nav-info-wrapper4">
<div class="additional-nav-info-inner4" style="display: none;">
<ul>
Maecenas sollicitudin et velit nec consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam venenatis elit vel elit porta, ac pretium arcu commodo. Curabitur nec diam eu eros dignissim vestibulum. Donec tellus justo, aliquet non nunc vel, accumsan gravida ligula. Mauris eu consequat mi, sed euismod nulla. Vestibulum luctus tempor tortor suscipit ultrices. Vestibulum in justo vel purus tincidunt convallis. Integer varius facilisis urna in scelerisque. Aliquam mattis neque eget arcu blandit, a mollis ligula consectetur.
</ul>
</div>
</div>
</div>
<div class="additional-navigation">
<a class="border-bottom-white padding-level-one inactive additional-nav-info5" href="javascript:void(0);">Lorem ipsum
<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" />
<span class="clearboth"></span>
</a>
<div class="additional-nav-info-wrapper5">
<div class="additional-nav-info-inner5" style="display: none;">
<ul>
Aliquam sed tellus eget nunc ultricies pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Sed fermentum, ante fermentum faucibus blandit, risus quam tristique justo, a feugiat odio nisl commodo augue.
Nulla facilisi.
Aenean hendrerit tortor vulputate cursus laoreet. Morbi libero leo, elementum eu lectus nec, fringilla imperdiet purus. Quisque eget odio tempus, ultricies orci eu, dictum dolor. Curabitur at lectus ac ipsum lobortis consectetur non a tellus. Donec vestibulum sapien et consequat venenatis. Sed in velit nulla. Nulla commodo, mi at lacinia blandit, tellus dui vestibulum dolor, ac interdum libero arcu a mi. Duis in neque a nulla varius laoreet. Etiam et purus adipiscing, adipiscing est vitae, porttitor nulla.
</ul>
</div>
</div>
</div>
<div class="additional-navigation">
<a class="border-bottom-white padding-level-one inactive additional-nav-info6" href="javascript:void(0);">Lorem ipsum
<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" />
<span class="clearboth"></span>
</a>
<div class="additional-nav-info-wrapper6">
<div class="additional-nav-info-inner6" style="display: none;">
<ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ultrices turpis, at ornare tellus. Integer at gravida tellus. Fusce at aliquet sem. Suspendisse condimentum laoreet bibendum. Nam id aliquam arcu. Vivamus vulputate purus vitae ipsum elementum, vitae feugiat risus pellentesque. Nam vel turpis dolor. Phasellus turpis lacus, facilisis ac lectus sed, imperdiet tempor sem. Duis sed tortor ac urna ultrices sagittis id vitae dolor. Duis mattis venenatis dui sit amet luctus. Fusce eu felis sed dui blandit volutpat. Nullam pharetra pellentesque quam ut laoreet.
</ul>
</div>
</div>
</div>
<div class="additional-navigation">
<a class="border-bottom-white padding-level-one active contact-details-onpage" href="javascript:void(0);">Lorem ipsum
<img class="nav-arrow no-action floatright" src="images/nav-arrow-blue-one.png" />
<span class="clearboth"></span>
</a>
<div class="contact-details-onpage-wrapper">
<div class="contact-details-onpage-inner" style="display: block;">
<ul>
<li>
<a href="#">EMAIL US
<img src="images/email-ico.png" />
<img style="display: none;" src="images/email-ico-active.png" />
</a>
</li>
<li>
<a href="#">08000 58 24 50
<img src="images/telephone-ico.png" />
<img style="display: none;" src="images/telephone-ico-active.png" />
</a>
</li>
<li>
<a href="#">OUR PORTFOLIO
<img src="images/portfolio-ico.png" />
<img style="display: none;" src="images/portfolio-ico-active.png" />
</a>
</li>
<li>
<a href="#">CONTACT FORM
<img src="images/contact-form-ico.png" />
<img style="display: none;" src="images/contact-form-ico-active.png" />
</a>
</li>
<div class="clearboth"></div>
</ul>
<div class="clearboth"></div>
</div>
</div>
</div>
</div>
这是我的css
html, body {
background: #FFFFFF;
font-family: arial;
font-size: 18px;
margin: 0;
padding: 0;
color: #000000;
}
.border-bottom-blue {
border-bottom: solid 1px #43b6cf;
}
.padding-level-one {
padding: 0 22px;
}
.additional-navigation-wrapper {
}
.additional-navigation .nav-arrow {
padding: 0;
}
.additional-navigation-wrapper a {
color: #000;
padding: 10px 22px;
text-transform: uppercase;
text-decoration: none;
display: block;
}
.additional-navigation .active {
color: #43b6cf;
border-bottom: solid 1px #43b6cf;
}
.csstransitions .additional-navigation-wrapper a {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.additional-navigation-wrapper a:hover {
color: #43b6cf;
border-bottom: solid 1px #43b6cf;
}
.contact-details-onpage-inner {
padding: 40px 22px 2px;
}
.contact-details-onpage-inner ul {
font-size: 12px;
}
.contact-details-onpage-inner li {
float: left;
position: relative;
list-style: none;
height: 23px;
margin: 0 40px 0 0;
}
.contact-details-onpage-inner li img {
position: absolute;
left: 0;
top: 0;
}
.contact-details-onpage-inner li a {
color: #ffffff;
text-decoration: none;
position: relative;
padding: 10px 5px 2px 30px;
}
.contact-details-onpage-inner li a:hover {
border: none;
color: #ffffff;
}
这是我的jquery
$(".additional-nav-info0").click(function () {
if ($(".additional-nav-info-inner0").css("display") == "block") {
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner0").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner0").stop().slideToggle(250);
}
});
$(".additional-nav-info-inner0 a").hover(function () {
$(this).find("img").eq(0).fadeOut(250);
$(this).find("img").eq(1).fadeIn(250);
}, function () {
$(this).find("img").eq(0).fadeIn(250);
$(this).find("img").eq(1).fadeOut(250);
});
$(".additional-nav-info1").click(function () {
if ($(".additional-nav-info-inner1").css("display") == "block") {
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner1").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner1").stop().slideToggle(250);
}
});
$(".additional-nav-info-inner1 a").hover(function () {
$(this).find("img").eq(0).fadeOut(250);
$(this).find("img").eq(1).fadeIn(250);
}, function () {
$(this).find("img").eq(0).fadeIn(250);
$(this).find("img").eq(1).fadeOut(250);
});
$(".additional-nav-info2").click(function () {
if ($(".additional-nav-info-inner2").css("display") == "block") {
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner2").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner2").stop().slideToggle(250);
}
});
$(".additional-nav-info-inner2 a").hover(function () {
$(this).find("img").eq(0).fadeOut(250);
$(this).find("img").eq(1).fadeIn(250);
}, function () {
$(this).find("img").eq(0).fadeIn(250);
$(this).find("img").eq(1).fadeOut(250);
});
$(".additional-nav-info3").click(function () {
if ($(".additional-nav-info-inner3").css("display") == "block") {
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner3").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner3").stop().slideToggle(250);
}
});
$(".additional-nav-info-inner3 a").hover(function () {
$(this).find("img").eq(0).fadeOut(250);
$(this).find("img").eq(1).fadeIn(250);
}, function () {
$(this).find("img").eq(0).fadeIn(250);
$(this).find("img").eq(1).fadeOut(250);
});
$(".additional-nav-info4").click(function () {
if ($(".additional-nav-info-inner4").css("display") == "block") {
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner4").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner4").stop().slideToggle(250);
}
});
$(".additional-nav-info-inner4 a").hover(function () {
$(this).find("img").eq(0).fadeOut(250);
$(this).find("img").eq(1).fadeIn(250);
}, function () {
$(this).find("img").eq(0).fadeIn(250);
$(this).find("img").eq(1).fadeOut(250);
});
$(".additional-nav-info5").click(function () {
if ($(".additional-nav-info-inner5").css("display") == "block") {
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner5").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner5").stop().slideToggle(250);
}
});
$(".additional-nav-info-inner5 a").hover(function () {
$(this).find("img").eq(0).fadeOut(250);
$(this).find("img").eq(1).fadeIn(250);
}, function () {
$(this).find("img").eq(0).fadeIn(250);
$(this).find("img").eq(1).fadeOut(250);
});
$(".additional-nav-info6").click(function () {
if ($(".additional-nav-info-inner6").css("display") == "block") {
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner6").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner6").stop().slideToggle(250);
}
});
这是JSFiddle的链接 http://jsfiddle.net/cerberus478/58Jm7/1/
答案 0 :(得分：0)
.slideToggle({direction: 'up'}, 250);
答案 1 :(得分：0)
<script type="text/javascript">
$(".additional-nav-info1").click(function(){
if($(".additional-nav-info-inner1").css("display") == "block"){
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner1").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner1").stop().slideToggle({direction: 'up'}, 250);
}
});
</script>
现在，您需要添加添加位置：绝对;到.additional-nav-info1。
答案 2 :(得分：0)
$(".additional-nav-info1").click(function(){
if($(".additional-nav-info-inner1").css("display") == "block"){
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner1").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner1").stop().slideToggle(250);
var dHeight = $(".additional-nav-info-inner1 ul").height();
$('html,body').animate({ scrollTop: '+=' + dHeight + 'px' }, 250);
}
});
<强> fiddle