最小化和最大化按钮不起作用 代码是 我想最小化和最大化这个 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>
最佳答案
试试这段代码:我已经评论了你的代码的两行 $(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>
关于javascript - 最小化最大化不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44774537/