最小化最大化 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，并且都应该有单独的最大化和最小化设施。所以谁能告诉我如何更改适用于所有 div 的 java 脚本？

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

<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函数

函数 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 中添加的类，这是必要的。修改时要小心。

Answer 3

只需将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');
  }
});