个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在尝试编写一个非常简单的向上滑动和滑动功能，在按下按钮后隐藏按钮，但我的 javascript 技能很少，并且肯定在做一些愚蠢的事情。
我不工作的是，当用户按下 Cancel 时，菜单应该向上滑动并且 Show 按钮应该重新出现。这是代码
<html>
<head>
<style>
div {margin:3px; width:130px; height:30px; display:none;}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="show" onclick="this.style.visibility = 'hidden';">Show</button>
<div><input type="text" size="20"/></div>
<div><input type="text" size="20"/></div>
<div><button id="submit">Submit</button> <button id="cancel">Cancel</button></div>
<script>
// Sliding Menu Down
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
// Sliding Menu UP [Not Working]
$(document.body).click(function () {
if ($("#cancel").is(":hidden")) {
$("div").slideUp("slow");
} else {
$("#cancel").show();
}
});
</script>
</body>
</html>
还尝试了以下变体，但未成功:
$("cancel").click(function () {
$(this).parent().slideUp("slow", function () {
$("#msg").text($("cancel", this).text() + " has completed.");
});
});
我见过许多相关问题和解决方案，但我无法弄清楚简单的 slideUp 并使 Show 按钮在取消时可见
最佳答案
试试这个:
<html>
<head>
<style>
div.menu {margin:3px; width:130px; height:30px; display:none; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function(){
$('#show').click(function(){
$('#show').slideUp('slow', function(){
$('.menu').slideDown('slow').removeClass('hidden');
}).addClass('hidden');
});
$('#cancel').click(function(){
$('.menu').slideUp('slow', function(){
$('#show').slideDown('slow').removeClass('hidden');
}).addClass('hidden');
});
})(jQuery);
</script>
</head>
<body>
<button id="show">Show</button>
<div class="menu hidden"><input type="text" size="20"/></div>
<div class="menu hidden"><input type="text" size="20"/></div>
<div class="menu hidden">
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
</div>
</body>
</html>
它易于使用:
$('#show').click(function(){...});
是单击 ID“显示”的按钮元素时的函数
$('#show').slideUp('slow', function(){...}).addClass('hidden');
首先向上滑动 ID 为“show”的元素，然后调用该函数，然后它向 ID 为“show”的元素添加一个“隐藏”类(如果你想检查它是否可见或不)
$('.menu').slideDown('slow', function(){ $(this).removeClass('hidden'); });
正在使用类“菜单”向下滑动元素并删除隐藏的类
如果按下“取消”，函数也是如此，只是 ID 和类不同 :)
关于javascript - jQuery slideDown slideUP - 隐藏按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4799604/
29
4
0
我希望用户能够单击该 div，向下滑动另一个子 div。当用户单击该子 div 内的按钮时，子 div 将向上滑动。 使用下面的 JQuery，div 可以很好地向下滑动。但是，当我单击按钮时，它会向
我有这行 JavaScript，我看到的行为是 selectedLi 立即消失而没有“向上滑动”。这不是我预期的行为。 我应该怎么做才能让 selectedLi 在被移除之前向上滑动？ selecte
$(".item").hover( function () { $(this).slideDown().append( $("Yes/No") );
这个问题已经有答案了: Callback of .animate() gets called twice jquery (2 个回答) 已关闭 9 年前。 我正在使用 jQuery 创建一个多选项卡
我正在使用包含 ul 和 li 标签的 side-nav。 看起来像: Mobile PLATFORM SPECIFIC GUIDES Magento Extensi
是否可以使用.slideUp，但对象只能向上滑动(例如)20px，而不是消失在屏幕之外？ HTML: Hide Tab 1 Tab 2 JQUERY: $(".
我正在使用 jQuery/Ajax 脚本来提交表单而无需重新加载页面。我的页面上有多个表单，它们都具有相同的类(并且没有 ID)。使用以下方式提交表单效果很好: $('document').r
我在从事这个项目时似乎正在自学 jquery。 我以为会有一种非常简单的方法来实现这种技术，但我到处搜索都没有成功。这是我们正在查看的页面: http://igs.link-networkonline
单击 div 对象时，slideUp 不起作用。 Jquery 代码: $('#show-about-btn').click(function() { $('#show-about-btn')
当 div 悬停在右侧时，我有一个列表会在右侧弹出。我想使用 jqueries SlideUp/Down 来显示和隐藏列表，这在大多数情况下都有效。但有时该功能会重复触发。不断地打开和关闭。我不知道为
$(document).ready(function() { $('#arrow').click(function () { if ($('#slide1').is(":hid
我将创建一个每周日历。当我切换星期时，我想将旧的星期向左或向右滑动以获取新内容。有谁能够帮助我？目前我没有好主意来实现这个。 非常感谢。 最佳答案 例如向左滑动而不是 .slideUp()您可以使用.
我想做的就是: 有7个数字和7个div，它们相互关联(nr 0与div 0有关系) 当点击其中一个数字时，它应该折叠所有其他未被选中的 div 可以一次多选 综上所述，基本上，页面有一些带有数字的标签
在表格行中显示或隐藏一些 div 后，如何为高度调整设置动画？基本上，在用户在单选组中进行选择并将鼠标悬停在该行之外后，其他单选选项将被隐藏以压缩表单。如果他们将鼠标移回该行，所有单选选项将再次出现。
当我滚动页面时，我想为页眉设置动画。它应该slideUp，添加一个类和slideDown。 slideUp 和 slideDown 按预期工作，但未添加类 header-small。怎么会？ $(fu
我有一个我创建的 Accordion 样本；问题很简单:第一次单击任何 Accordion 项目时，slideUp() 动画不起作用。我在链接 jquery 方法方面仍然不太熟练，所以我的问题是:我应
如何确保多个 div 向上滑动？现在我有这个功能: $("div#personal").click(function() { $("div.1").slideUp("slow", function
我创建了一个带有旋转木马导航的 Flexslider。导航被设计为移动屏幕尺寸的垂直列表。 在移动设备上:我想隐藏列表(点击的幻灯片标题除外)，以便用户可以看到所选的幻灯片。 在大屏幕上:我只想让简单
我在使用 jQuery slideUp() 方法时遇到问题。我有一个计时器设置为在 1 秒内向上滑动一个 div，然后显示一个段落。我的 div 中有一个位于屏幕中央的 h1 元素。问题是当这个 h1
我有一个图标可以同时触发向上滑动和向下滑动的效果，但是在向下滑动之后，如果我再次按下同一个图标，它就不再起作用了。 $(document).ready(function(){ $('.subc
我是一名优秀的程序员,十分优秀！