[英]jQuery slideDown slideUP - hide button
我正在嘗試編寫一個非常簡單的向上滑動和滑動功能,在按下按鈕后隱藏按鈕,但我幾乎沒有 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(){...});
是按鈕 Element ID“顯示”被點擊時的函數
$('#show').slideUp('slow', function(){...}).addClass('hidden');
首先向上滑動 ID 為“show”的元素,然后調用該函數,然后向 ID 為“show”的元素添加一個“隱藏”類(如果你想檢查它是否可見)
$('.menu').slideDown('slow', function(){ $(this).removeClass('hidden'); });
正在使用類“菜單”向下滑動元素並刪除隱藏的類
如果按下“取消”,則功能相同,只有 ID 和類不同:)
從哪兒開始。 第一的。 提供您所有的 DIV ID,以便您可以直接訪問它們。 第二。 引用你想要的取消按鈕$('#cancel')
在一個詞前加一個"#"
表示“具有這個 ID 的元素”一個“。” 表示此類的“元素”
你也確定你的意思是做$("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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.