javascript - jQuery 滑动切换最小化

Question

我有一个像这样的 div 标签，

<div id="widnow">
    <div id="title_bar">
        <div id="button">-</div>
    </div>
   <div id="box">
   </div>
</div>

我已经编写了一个 JQuery 函数来最小化框，现在我希望标题栏也最小化到页面底部，

<script type="text/javascript">
$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
        $("#title_bar").slideDown();
    }
    else{
        $(this).html("-");
        $("#title_bar").slideUp();
    }
    $("#box").slideToggle();
});
</script>

但是使用这个唯一的框会被最小化和最大化，并且 title_bar 完全消失，我如何实现将 title_bar 与框 div 一起最小化到页面底部？

我正在努力实现:

1. 点击 '-' 时，#title_bar 和 #box 必须最小化到页面底部，并且 '-' 应更改为 '+'
2. 点击 '+' 时，#title_bar 和 #box 都必须最大化，并且 '+' 必须更改为 '-'

Answer 1

点击此处:jsfiddle演示

HTML 代码

<div class='wrapper'>
    <span class='switch-icons'>-</span>
    <h2 class='title'>title bar</h2>
<div class='content'>
    the content goes here
</div>
</div>

JS`代码

$('.switch-icons').on('click',function(){
    if($(this).html()==='-'){$(this).html('+');}
    else $(this).html('-')
    $('.title,.content').slideToggle();
});