最小化最大化不起作用
[英]Minimize Maximize is not Working
问题描述
最小化和最大化按钮不起作用代码是我想最小化和最大化此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
您需要在div框内添加一些内容，因此我添加了一个固定高度来演示该功能。
而且您正在滑动按钮div，该按钮将被隐藏，从而阻止您再次单击它。
有关如何操作，请参见下面的代码段
$(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
尝试以下代码：我已经注释了代码的两行$(this).slideUp(); 和$(this).slideDown(); 该行显示/隐藏该链接的点击。
$(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(); 在按钮功能中，只需滑动按钮，将其移除，就可以了！
$(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>
如何最大化和最小化一个 div（没有 jquery 只有 javascript）
[英]How to maximize and minimize a div (no jquery only javascript)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.