最小化最大化不起作用
[英]Minimize Maximize is not Working
问题描述
The minimize & maximize Button is not working The code is I want to minimize & maximize this div & also how to set the height of div box.It is just as extra as height of title bar because i give height as 100% 
最小化和最大化按钮不起作用代码是我想最小化和最大化此div以及如何设置div框的高度。它与标题栏的高度一样多，因为我将高度设为100％
$(function() { $("#main").resizable(); }); $("#button").click(function() { if ($(this).html() == "-") { $(this).html("+"); $(this).slideUp(); } else { $(this).html("-"); $(this).slideDown(); } $("#box").slideToggle(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="main" id="main"> <div id="title_bar"> <div id="button">-</div> </div> <div id="box"> </div> </div>
4 个解决方案
解决方案1
0 2017-06-27 07:38:10
You need to have some content inside the div box, so i added a fixed height ot demonstrate the function. 您需要在div框内添加一些内容，因此我添加了一个固定高度来演示该功能。
And you were sliding the button div which will hide it prevent you from click on it again. 而且您正在滑动按钮div，该按钮将被隐藏，从而阻止您再次单击它。
See snippet bellow on how to do it: 有关如何操作，请参见下面的代码段
$(function() { $("#main").resizable(); }); $("#button").click(function() { if ($(this).html() == "-") { $(this).html("+"); $("#main").css('height', 'auto'); $("#main").resizable('disable'); } else { $(this).html("-"); $("#main").resizable('enable'); } $("#box").slideToggle(); });
#box { height: 100px; } #button { cursor: pointer; background: yellow; padding: 0 5px; } #main { border: 1px solid; background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="main" id="main"> <div id="title_bar"> <div id="button">-</div> </div> <div id="box"> </div> </div>
解决方案2
0 已采纳 2017-06-27 07:38:43
Try this code : I have commented two lines of your code $(this).slideUp(); 尝试以下代码：我已经注释了代码的两行$(this).slideUp(); and $(this).slideDown(); 和$(this).slideDown(); this lines show/hide on click of that link. 该行显示/隐藏该链接的点击。
$(function () { $("#main").resizable(); }); $("#button").click(function () { if ($(this).html() == "-") { $(this).html("+"); //$(this).slideUp(); } else { $(this).html("-"); //$(this).slideDown(); } $("#box").slideToggle(); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <body> <div class="main" id="main"> <div id="title_bar"> <div id="button">-</div> </div> <div id="box" style="height:200px;border:1px red solid"> This is box </div> </div> </body>
解决方案3
0 2017-06-27 07:40:27
$(this).slideDown(); in the buttons function will simply slide the button, remove them and you're basically good to go! 在按钮功能中，只需滑动按钮，将其移除，就可以了！
$(function() { $("#main").resizable(); }); $("#button").click(function() { if ($(this).html() == "-") { $(this).html("+"); } else { $(this).html("-"); } $("#box").slideToggle(); });
#button { background: lightblue; border: 1px solid #ccc; } #box { background: coral; border: 1px solid #ccc; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="main" id="main"> <div id="title_bar"> <div id="button">+</div> </div> <div id="box"> Hello World! </div> </div>
解决方案4
0 2017-06-27 07:45:19
$(function() { $("#main").resizable(); $("#button").click(function() { if ($(this).html() == "-") { $(this).html("+"); $(this).slideDown(); } else { $(this).html("-"); $(this).slideDown(); } $("#box").slideToggle(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="main" id="main"> <div id="title_bar"> <div id="button">-</div> </div> <div id="box">Hi </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.