最小化div最大化?适用于所有div的javascript或jquery [英] minimize maximize the div ? javascript or jquery which works for all the div

问题描述

我想为我的div提供最小化和最大化功能.为此，我已经在我的jsp页面中编写了以下代码

i want to give minimize and maximize facility to my div..for that i have written following code in my jsp page

<div id="widnow" style="width: auto;">
    <div id="title_bar">
      <button type="button" class="max" id="button">
    <img id="max" src="<%=request.getContextPath()%>/img/Minimize.png" />
</button>
    </div>
      <div id="box" style="height:auto; width: auto;">
       <span id="info3" style="display: none;"></span>

    <div id="chart3" style="width:80%; height:300px;"></div>



    </div>

 </div>

以下是我的CSS

#widnow{
    width:400px;
    border: 1px solid #DCDCDC;

}



#button{
    width: 25px;
    height: 24px;
    float:right;
    cursor:pointer;
    position:relative;
    margin: 0px 0px 0px 0px;

}
#title_bar{
    background-image: url("<%=request.getContextPath()%>/img/Header Background.png");
    height: 25px;
    width: auto;
  border-bottom: 1px solid #DCDCDC;

}

以下是我的js

$("#button").click(function(){

    var isclass = $(this).attr('class');
    if (isclass == "max") 

    {
        $("#max").attr("src","<%=request.getContextPath()%>/img/Minimize.png");
        $(this).removeClass('max');
    }
    else{
        $(this).addClass('max');
        $("#max").attr("src","<%=request.getContextPath()%>/img/Maximize.png");
    }
    $("#box").slideToggle();

});

它工作得很好当有一个div时，我想提供此功能..但是使用一个Java脚本功能或j-query如何实现此目的?我在单个页面中有多个div，并且每个页面都应有一个单独的div最大化和最小化便利.所以有人能告诉我如何更改适用于所有div的java脚本吗?

Its Working Well When there is one div i want to give this facility..but with one single java script function or with j-query how can i achieve this?i have many div in single page and all should have there individual maximize and minimize facility.so can anyone tell me how can change my java script that works with all div?

推荐答案

稍微重构一下代码:

function activateMaxMin(elemButton,elemMax,elemBox)
{

  var isclass = elemButton.attr('class');
    if (isclass == "max") 

    {
        elemMax.attr("src","<%=request.getContextPath()%>/img/Minimize.png");
        elemButton.removeClass('max');
    }
    else{
        elemButton.addClass('max');
        elemMax.attr("src","<%=request.getContextPath()%>/img/Maximize.png");
    }
    elemBox.slideToggle();

}

$("#button").click(function(){
activateMaxMin($(this),$("#max"),$("#box"));

});

如果还有另一个类似的按钮，请使用:

In case there is another button like this, use:

$("#button1").click(function(){
activateMaxMin($(this),$("#max1"),$("#box1"));

});

当然，可以以更有效的方式完成此操作，但这需要完全重写代码.

Of course, it could have been done in more efficient way, but that would need rewriting your code entirely.

这篇关于最小化div最大化?适用于所有div的javascript或jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！