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會完全消失，如何與box div一起最小化頁面底部的title_bar？

我正在努力達到：

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`code

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

Answer 2

缺少ID選擇器（在$('title_bar')缺少# ）

$("#button").click(function () {
    $(this).html(function (i, html) {
        return $.trim(html) == '-' ? '+' : '-'
    })
    $("#box, #title_bar").stop().slideToggle();
});

演示： 小提琴

Answer 3

您缺少#來選擇ID為title_bar元素。

您還可以將代碼縮短為：

$("#button").click(function () {
    $(this).html($(this).html() == "-" ? "+" : "-");
    $("#box, #title_bar").slideToggle();
});

另外，您需要將代碼包裝在DOM ready處理程序中：

$(function() {
    $("#button").click(function () {
        $(this).html($(this).html() == "-" ? "+" : "-");
        $("#box, #title_bar").slideToggle();
    });
});

Answer 4

檢查一下： http : //jsfiddle.net/3T5fR/

您需要像這樣修改您的JS：

$("#button").click(function(){
    if($(this).html() == "+"){
        $(this).html("-");
        $("#box").slideDown();
    }
    else{
        $(this).html("+");
        $("#box").slideUp();
    }    
});