Przycisk Minimize & Maksymaliza nie działa Kodem Czy chcę zminimalizować i zminimalizować ten div i jak ustawić wysokość Div Box.it jest tak samo jak wysokość paska tytułu, ponieważ daje im wysokość jako 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>
2
Aviral Garg 27 czerwiec 2017, 10:28

4 odpowiedzi

Najlepsza odpowiedź

Wypróbuj ten kod: skomentowałem dwie linie swojego kodu $(this).slideUp(); i $(this).slideDown(); Te linie pokazują / ukryj na kliknięciu tego linku.

        $(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>
0
Pankaj Makwana 27 czerwiec 2017, 08:23

Musisz mieć trochę treści w polu Div, więc dodałem stałą wysokość OT, wykazują funkcję.

I przesunąłeś przycisk DIV, który się ukryje, uniemożliwił to ponownie.

Zobacz fragment poniżej, jak to zrobić:

$(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>
0
Chiller 27 czerwiec 2017, 07:51
$(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>
0
Suneel Kumar 27 czerwiec 2017, 07:45

$(this).slideDown(); W funkcji przycisków po prostu przesuń przycisk, usunąć je i jesteś w zasadzie dobry!

$(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>
0
AlexG 27 czerwiec 2017, 07:40