最小化最大化不工作

最小化&最大化按鈕不工作的代碼是我希望儘量減少&最大化這個div &還怎麼設置DIV box.It的高度是一樣的標題欄的高度額外因爲我給高度爲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>

來源

2017-06-27 Aviral Garg

這裏是一個小提琴，可以幫助你：https://jsfiddle.net/p45dvrap/1/ 你能不能給出一個明確的說明爲您的第二點「以及如何設置分隔框的高度」 – HEGDE

試試這個代碼：我評論過你的代碼$(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>

來源

2017-06-27 07:38:43

它不工作.. –

什麼是不工作，它最小化/最大化 –

雅婭沒有行動是有點擊 –

您必須在div盒子裏面的一些內容，所以我增加了一個固定的高度OT演示功能。

而你滑動的按鈕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>

來源

2017-06-27 07:38:10 Chiller

沒有它的不工作.. –

@ Tech什麼不工作？你能提供一些信息！ – Chiller

它也沒有工作我只需要最大限度地減少和最大化div –

中的按鈕功能$(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>

來源

2017-06-27 07:40:27 AlexG

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

來源

2017-06-27 07:45:19

最小化最大化不工作

回答

相關問題