javascript - 最小化最大化不起作用

标签 javascript jquery html css

最小化和最大化按钮不起作用 代码是 我想最小化和最大化这个 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/

相关文章:

javascript - 长轮询 - jquery + php

javascript - 我可以使用 AngularJs 指令将样式应用于伪元素吗

jquery - 将 jQuery UI 复选框选择限制为一个,并在选择复选框值时更新文本框

html - 中间和左边之间的中心 div

html - 使用 CSS 设置图像的纵横比

javascript - 无法从 getElementsByClassName 访问 HTMLCollection 中的元素

jquery - 如何使用greasemonkey将页面元素添加到另一个页面

javascript - 将数组存储在隐藏输入中,并使用ajax打印出来

html - 如何构建对 Angular 英雄部分?

javascript - 使用 CasperJS 检查 AJAX 加载的 JS 对象/类?