最小化最大化不工作

最小化&最大化按钮不工作的代码是我希望尽量减少&最大化这个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

最小化最大化不工作

回答

相关问题