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

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

 
  /img/Minimize.png" />  
 
  
 
  

以下是我的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("http://sofzh.miximages.com/javascript/%=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","http://sofzh.miximages.com/javascript/%=request.getContextPath()%>/img/Minimize.png"); $(this).removeClass('max'); } else{ $(this).addClass('max'); $("#max").attr("src","http://sofzh.miximages.com/javascript/%=request.getContextPath()%>/img/Maximize.png"); } $("#box").slideToggle(); }); 

它运作良好当有一个div我想给这个设施..但是有一个单独的java脚本函数或j-query我怎么能实现这个？我在单页中有很多div，所有应该有个别最大化和最小化来。所有人都可以告诉我如何更改我的java脚本适用于所有div？

Answer 1

稍微重建你的代码：

 function activateMaxMin(elemButton,elemMax,elemBox) { var isclass = elemButton.attr('class'); if (isclass == "max") { elemMax.attr("src","http://sofzh.miximages.com/javascript/%=request.getContextPath()%>/img/Minimize.png"); elemButton.removeClass('max'); } else{ elemButton.addClass('max'); elemMax.attr("src","http://sofzh.miximages.com/javascript/%=request.getContextPath()%>/img/Maximize.png"); } elemBox.slideToggle(); } $("#button").click(function(){ activateMaxMin($(this),$("#max"),$("#box")); }); 

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

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

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

Answer 2

// javascript函数

function activateMaxMin（elemButton，elemMax，elemBox）{

var isclass = elemButton.attr（’class’）; if（isclass ==“max”）

 { elemMax.attr("src","http://sofzh.miximages.com/javascript/%=request.getContextPath()%>/img/Minimize.png"); elemButton.removeClass('max'); } else{ elemButton.addClass('max'); elemMax.attr("src","http://sofzh.miximages.com/javascript/%=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'); } });