向下滑动和向上滑动
[英]Slide Down & Slide Up
问题描述
I am using Slide down & Up it's working fine.
我正在使用向下和向上滑动它工作正常。 But my problem is when user open this page it slide Up if user click then only slide down.但我的问题是，当用户打开此页面时，如果用户单击，则它向上滑动，然后仅向下滑动。
<script type="text/javascript">
jQuery(function ($) {
$(".block-layered-nav dt").click(function () {
if ($(this).next("dd").css("display") == "none") {
$(this).next("dd").slideDown(1000);
$(this).removeClass("closed");
} else {
$(this).next("dd").slideUp(1000);
$(this).addClass("closed");
}
});
});
</script>
What mistake i done我犯了什么错误
3 个解决方案
解决方案1
2 已采纳 2016-03-23 13:25:50
Add class
closedwith the elementclosed的类
Working Demo 工作演示
jQuery(function($) { $('dd').hide() $(".navigation dt").click(function() { if ($(this).next('dd').is(":visible")) { $(this).next('dd').slideToggle('slow').toggleClass('close'); } else { $(this).next('dd').slideToggle('slow').toggleClass('close'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation"> <dt>test</dt> <dd class="close">sample</dd> </div>
解决方案2
1 2016-03-23 13:50:26
You can just use $.fn.slideToggle() and $.fn.toggleClass() to resolve state detection problem. 您可以只使用$.fn.slideToggle()和$.fn.toggleClass()解决状态检测问题。 Solution: 解：
jQuery(function($) { $(".navigation dt").click(function() { $(this).next('dd').stop(true, false).slideToggle().toggleClass('close'); }); });
.closed { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation"> <dt>test</dt> <dd class="closed">sample</dd> </div>
You just need to be sure of initial state of the class and CSS display attribute. 您只需要确定类的初始状态和CSS display属性即可。 And, also added $.fn.stop() function to avoid animation glitches. 并且，还添加了$.fn.stop()函数来避免动画故障。
解决方案3
-1 2019-10-12 06:44:08
<html>
<head>
<script src="jquery.js">
</script>
</head>
<body >
<div class="test4" style="border: 1px solid black;">
<h1>Hi </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ducimus, animi provident laudantium necessitatibus odit. Qui quam iusto optio libero cum, nemo perferendis rerum veritatis expedita, est totam dolore natus!</p>
</div>
<div class="test1">
<button>Show Button</button>
<button id="test">Button 2</button>
</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("$test4").slideToggle();
});
$("#test").click(function()
{
$("#test4").slideDown();
});
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.