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与box div一起最小化到页面底部？

我正在努力实现：

点击'-'后，#title_bar和#box必须最小化到页面底部，'-'应更改为'+'
点击'+'时，#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();
});

演示：Fiddle

Answer 3

您缺少#来选择ID为title_bar的元素。

您还可以将代码缩短为：

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

此外，您需要将代码包装在DOM就绪处理程序中：

$(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();
    }    
});

jQuery幻灯片切换最小化

4 个答案: