jQuery滑动切换最小化

jQuery slide toggle minimize

本文关键字：最小化 jQuery      更新时间：2023-09-26

我有一个这样的div标签

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

我已经编写了一个JQuery函数来最小化box，现在我想让标题栏也最小化到页面的底部所以，

<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必须最大化，'+'必须更改为'-'

点击这里查看:jsfiddle demo

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

缺少id选择器($('title_bar')中缺少#)

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

演示:小提琴

您缺少#以选择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();
    });
});

检查:http://jsfiddle.net/3T5fR/

你需要这样修改你的JS:

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