我正在尝试编写一个非常简单的向上滑动和滑动功能,该功能可以在按下按钮后将其隐藏,但是我的Java语言技能不高,而且肯定会做一些愚蠢的事情。
[我不工作,是当用户按下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”的Element,然后调用该函数,然后向ID为“ show”的Element添加“ hidden”类(如果要检查其可见还是可见,不是)
$('.menu').slideDown('slow', function(){ $(this).removeClass('hidden'); });
正在使用“菜单”类向下滑动元素并删除隐藏的类
如果按“取消”,功能也一样,只有ID和类不同:)
从哪里开始。第一。提供所有DIV的ID,以便您可以直接访问它们。第二。在单词之前表示要$('#cancel')
为"#"
的取消按钮,表示“具有此ID的元素”为“”。表示具有此类的“ ELEMENT(s)”]
您还确定要执行$("div").slideDown("medium");
和类似的操作吗?这意味着对所有DIV元素执行该操作
<button id="show" style="display:block;">Show</button>
<div class='inputs' style='display:none;'>
<div><input type="text" size="20"/></div>
<div><input type="text" size="20"/></div>
<div><button id="submit" class='formDone'>Submit</button> <button id="cancel" class='formDone'>Cancel</button></div>
</div>
<script>
$(document).ready(function(){
$('#show').live('click',function(){//show the form on request
$(this).hide();
$('.inputs').show();
});
$('.formDone').live('click',function(){//hide the form on submit of cancel
//use a AJAX method to submit your form maybe here???
$('#show').show();
$('.inputs').hide();
});
});
</script>