jQuery slideDown slideUP - скрыть кнопку

Я пытаюсь написать очень простую слайд-слайд и функцию слайда, которая скрывает кнопки после нажатия, но у меня мало навыков работы с javascript, и я, конечно, делаю что-то глупое.jQuery slideDown slideUP - скрыть кнопку

Что я не работаю, когда пользователь нажимает Cancel, меню должно соскользнуть назад, а кнопка Show должна появиться снова. Heres код

<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.

Fiddle для тех, кто заинтересован: http://www.jsfiddle.net/bradchristie/nhUKb/ (Придется уезжать, иначе я бы вам помочь, но думал, что я облегчить для следующего человека) –

Спасибо вам, сэр –

Try это:

<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');

является первым скользя элемент с идентификатором «шоу» и вызов функции после этого, а затем добавляет в «скрытый» класс к элементу с идентификатором «шоу» (если вы хотите, чтобы проверить, если его видимым или нет)

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

скользит вниз Элементы с «меню» класса и удаление класса скрытый

То же для функции, если «отменить» , только идентификаторы и классы различны :)

Я надеюсь, что это помогает ..

источник

2011-01-25 22:48:29 ahmet2106

Это прекрасно! Ты замечательный. Спасибо огромное! –

с чего начать. первый. дайте все ваши идентификаторы DIVs, чтобы вы могли получить к ним доступ напрямую. секунд. для ссылки на кнопку «Отмена» вы хотите: $('#cancel') a "#" перед словом «ELEMENT с этим идентификатором» a. ? Означает «элемент (ы)» с этим классом»

также вы уверены, что вы имеете в виду, чтобы сделать $("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>

источник

2011-01-25 22:36:24 FatherStorm

Спасибо, Ive отредактировал ссылку отмены. Идея состоит в том, чтобы показать и скрыть все divs, они будут иметь идентификаторы, когда они закончатся, но я не думал, что это необходимо для примера –

, но если вы сделаете это так и добавите fotter в документ, содержащий div, то это div также следует тем же правилам. когда вы избегаете, вы не хотите предпринимать действия над защищенным объектом DOM, таким как ALL div или ALL spans, потому что это заставит вас переписать, если вы когда-либо захотите добавить на страницу обычный DIV или SPAN без изменений. – FatherStorm

jQuery slideDown slideUP - скрыть кнопку

ответ

Смежные вопросы