jQuery SlideDown SlideUP - 隐藏按钮

发布于 2024-10-14 10:23:16 字数 1414 浏览 6 评论 0原文

我正在尝试编写一个非常简单的向上滑动和滑动功能，在按下按钮后隐藏按钮，但我的 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 按钮在取消

原文

I am trying to write a very simple slide up and slide function that hides the buttons after they are pressed, but I have little javascript skill and am surely doing something silly.

What I is not working, is when the user presses Cancel the menu should slide back up and the Show button should reappear. Heres the code

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

Have also, unsuccessfully, tried some variations of:

 $("cancel").click(function () {
 $(this).parent().slideUp("slow", function () {
 $("#msg").text($("cancel", this).text() + " has completed.");
   });
});

I have seen many related issues and resolutions but I cannot figure out the simple slideUp and making the Show button visible on cancel

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彻夜缠绵 2024-10-21 10:23:16

试试这个：

<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”的按钮元素，

$('#show').slideUp('slow', function(){...}).addClass('hidden');

该函数首先向上滑动ID为“show”的元素，然后调用该函数，然后添加一个“hidden”类到 ID 为“show”的元素（如果您想检查其是否可见）

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

正在向下滑动类为“菜单”的元素，并删除隐藏的类

如果“取消”为“取消”，则函数的情况也是如此按下，只有 ID 和 Classes 不同:)

Try this:

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

Its easy to use:

$('#show').click(function(){...});

is the function if the button Element the ID "show" is clicked

$('#show').slideUp('slow', function(){...}).addClass('hidden');

is first sliding up the Element with the ID "show" and is calling the function afterwards, and then it is adding an "hidden" class to the Element with the ID "show" (if you want to check if its visible or not)

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

is sliding Down the Elements with the Class "menu" and is removing the class hidden

The same is for the Function if "cancel" is pressed, only the IDs and Classes are different :)

回复收藏 0 原文

︶葆Ⅱㄣ 2024-10-21 10:23:16

从哪里开始。
第一的。提供您所有的 DIV ID，以便您可以直接访问它们。
第二。要引用取消按钮，您需要在单词前 $('#cancel') 加上 "#" 表示“具有此 ID 的 ELEMENT” 为“.”表示“此类的 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>

where to start.
first. give all your DIVs ID's so you can access them directly.
second. to reference the cancel button you want $('#cancel') a "#" before a word means "The ELEMENT with this ID" a "." means "The ELEMENT(s)" with this class"

also are you sure you mean to do $("div").slideDown("medium"); and the similar? that means do that action to ALL DIV elements

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

回复收藏 0 原文

~没有更多了~