Question

最小化＆amp;最大化按钮不起作用代码是我想最小化＆amp;最大化这个div＆amp;还有如何设置div box的高度。它与标题栏的高度一样多，因为我给出高度为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>

Answer 1

你需要在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>

Answer 2

试试这段代码：我已经评论了代码的两行$(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>

Answer 3

按钮功能中的

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

Answer 4

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

最小化最大化不起作用

4 个答案: