1

我想为我的 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 谁能告诉我如何更改适用于所有 div 的 java 脚本？

4

3 回答 3

2

稍微重构你的代码：

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

});

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

于 2013-01-28T08:00:06.597 回答
1

只需更改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');
  }
});
于 2013-01-28T07:58:12.793 回答
1 
<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 中添加的类，这是必要的。修改时要小心。

于 2013-01-28T08:30:05.240 回答