最小化div最大化？ 适用于所有div的javascript或jquery

Question

我想给我的div提供最小化和最大化的设施..因为我已经在我的jsp页面中编写了以下代码

<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，所有应该有个别最大化和最小化facility.so任何人都可以告诉我如何更改我的java脚本适用于所有div？

Answer 1

稍微重建你的代码：

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"));

});

如果有这样的另一个按钮，请使用：

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

});

当然，它可以以更有效的方式完成，但这需要完全重写代码。

Answer 2

只需将id notation "#"更改为类选择器"." 比如#max到.max

什么浏览器只会在第一次出现id起作用，并尝试将img id更改为class

那么在你的情况下，我已经创建了一个小提琴，如果这有助于你：

http://jsfiddle.net/32e2V/

$(".button").click(function () {
  $(this).closest('div').siblings(".box").slideToggle();
  if ($(this).text() == "max") {
    $(this).text('min');
  } else {
    $(this).text('max');
  }
});

Answer 3

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

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



    </div>

 </div>

// javascript函数

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

}

$(document).ready(function(){
$(".maxMinButton").click(function(){

var elemButton=$(this);
var maxMinWidnow=button.closes('.window');
var elemMax=$(".max:firs",maxMinWidnow);
var elemBox=$(".box:first",maxMinWidnow);

activateMaxMin(elemButton,elemMax,elemBox)
});
});

如果不对代码进行大量修改，这是我能得到的最好的。 注意html中每个div中添加的类是必要的。 修改时要小心。