jQuery slideDown slideUP - 隱藏按鈕

我想寫一個非常簡單的幻燈片上載和幻燈片功能，他們被按下後隱藏按鈕，但我有一點JavaScript技能，肯定會做一些愚蠢的事情。jQuery slideDown slideUP - 隱藏按鈕

什麼我不工作，是當用戶按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按鈕可見取消

來源

2011-01-25 JB.

搗鼓有興趣的人：http://www.jsfiddle.net/bradchristie/nhUKb/（必須離開，否則我會幫助你，但想到我會讓下一個人更容易） – 2011-01-25 22:35:00

謝謝你好先生 – 2011-01-25 22:43:12

試試這個：

<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爲「作秀」，並隨後調用函數，然後將它添加一個「隱藏」類元素的ID「秀」（如果你想檢查其可見或不可見）

$('.menu').slideDown('slow', function(){ $(this).removeClass('hidden'); });

往下滑與類「菜單」的元素，並移除類隱藏

這同樣適用於功能，如果「取消」被按下，只有ID和類是不同的:)

我希望這可以幫助你..

來源

2011-01-25 22:48:29 ahmet2106

從哪裏開始。首先是。給你所有的DIV ID，以便你可以直接訪問它們。第二個是。在一個字的前面加上你想要的取消按鈕$('#cancel') a "#"10表示「帶有這個ID的元素」a「。」？指「元素（S）」這一類」

還你確定你的意思做$("div").slideDown("medium");和相似，這意味着做動作ALL 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>

來源

2011-01-25 22:36:24 FatherStorm

謝謝，我編輯了取消參考。這個想法的確是顯示和隱藏所有的div，他們在完成時會有ID，但我並不認爲這對於 – 2011-01-25 22:42:41

jQuery slideDown slideUP - 隱藏按鈕

回答

相關問題