點擊展開div

我的問題對於很多人來說相當簡單。我想擴大div（onClick），以適應外部股利，它應該完全覆蓋所有其他三個股利（不是全屏）點擊展開div

我想使用下面的代碼，但頁面的整個結構當我嘗試這樣做時會感到不安。

<head runat="server"> 
<title>Untitled Page</title> 
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" /> 

<script src="js/jquery-1.8.1.min.js" type="text/javascript"></script> 

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 

<style type="text/css"> 
    .toggler 
    { 
     max-width: 500px; 
     max-height: 270px; 
     position: relative; 
    } 
    .newClass 
    { 
     height: 500px; 
     width: 290px; 
     display: inline-block; 
     z-index: 10000px; 
     float: left; 

    } 

    .divClass 
    { 
     float: left; 
     vertical-align: middle; 
     height: 50px; 
     width: 500px; 
    } 
</style> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#div1').click(function() { 
    $('#div1').toggleClass('newClass'); 
    }); 
    }); 
</script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<table width="100%"> 
    <tr style="height: 100%;"> 
     <td style="width: 30%; height: 500px;"> 
     </td> 
     <td style="width: 70%; height: 500px;"> 
      <div style="width: 100%; height: 500px;"> 
       <table style="height: 500px; width: 100%;"> 
        <tr> 
         <td class="toggler"> 
          <div id="div1" style="background-color: Black;"> 
           Hello World! 
          </div> 
         </td> 
         <td style="width: 50%" class="toggler"> 
          <div id="div2" style="background-color: Blue; width: 100%; height: 100%;"> 
          </div> 
         </td> 
        </tr> 
        <tr> 
         <td style="width: 50%" class="toggler"> 
          <div id="div3" style="background-color: Red; width: 100%; height: 100%;"> 
          </div> 
         </td> 
         <td style="width: 50%" class="toggler"> 
          <div id="div4" style="background-color: Maroon; width: 100%; height: 100%;"> 
          </div> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </td> 
    </tr> 
</table> 
</form>

究竟什麼是我的代碼的問題????請幫助..

注意：我也試過addClass與removeClass方法。沒有好結果...

來源

2012-12-26 writeToBhuwan

它應該涵蓋所有的DIV？你想3個div不顯示時，onclick div更大的權利？順便說一句，他們爲什麼在桌子上？ – Chanckjh

和z-index不使用px – Chanckjh

我需要將此函數應用於所有其他三個div ...並且是的，您是對的，我不想在顯示其他三個div時放大其中任何一個... – writeToBhuwan

這樣的事情。的jsfiddle：http://jsfiddle.net/4L5fw/2/

HTML：

<div class="wrapper"> 
    <div class="black"></div> 
    <div class="blue "></div> 
    <div class="red"></div> 
    <div class="green"></div> 
</div>

CSS：

.wrapper{ 
    width: 500px; 
    height: 500px; 
} 
.black{ 
    width: 250px; 
    height: 50px; 
    background: black; 
} 
.blue{ 
    width: 250px; 
    height: 250px; 
    background: blue; 
} 

.red{ 
    width: 250px; 
    height: 250px; 
    background: red; 
} 
.green{ 
    width: 250px; 
    height: 250px; 
    background: green; 
} 

div{ 
    float: left; 
} 


.active{ 
    height: 100%; 
    width: 100%; 
} 

.hide{ 
    display: none; 
}

的jQuery：

$(document).ready(function(){ 
    $('.wrapper div').click(function() { 
     $(this).toggleClass('active'); 
     $(this).siblings().not(this).toggleClass('hide'); 
    }); 
});

來源

2012-12-26 21:05:20 Chanckjh

謝謝你..我見過的最好和最優化的代碼..！非常感謝..！ – writeToBhuwan

這似乎很好地工作。

<head runat="server"> 
<title>Untitled Page</title> 
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" /> 

<script src="js/jquery-1.8.1.min.js" type="text/javascript"></script> 

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 

<style type="text/css"> 
    .toggler 
    { 
     max-width: 500px; 
     max-height: 270px; 
     position: relative; 
    } 
    .newClass 
    { 
     height: 500px; 
     width: 290px; 
     display: inline-block; 
     z-index: 10000px; 
     float: left; 

    } 

    .divClass 
    { 
     float: left; 
     vertical-align: middle; 
     height: 50px; 
     width: 500px; 
    } 
</style> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#div1').click(function() { 
    $('#div1').toggleClass('newClass'); 
    }); 
    }); 
</script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<table width="100%"> 
    <tr style="height: 100%;"> 
     <td style="width: 30%; height: 500px;"> 
     </td> 
     <td style="width: 70%; height: 500px;"> 
      <div style="width: 100%; height: 500px;"> 
       <table style="height: 500px; width: 100%;"> 
        <tr> 
         <td class="toggler"> 
          <div id="div1" style="background-color: Black;"> 
           Hello World! 
          </div> 
         </td> 
         <td style="width: 50%" class="toggler"> 
          <div id="div2" style="background-color: Blue; width: 100%; height: 100%;"> 
          </div> 
         </td> 
        </tr> 
        <tr> 
         <td style="width: 50%" class="toggler"> 
          <div id="div3" style="background-color: Red; width: 100%; height: 100%;"> 
          </div> 
         </td> 
         <td style="width: 50%" class="toggler"> 
          <div id="div4" style="background-color: Maroon; width: 100%; height: 100%;"> 
          </div> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </td> 
    </tr> 
</table> 
</form>

的jsfiddle鏈接：http://jsfiddle.net/3tkpa/

如果你點擊黑色DIV，它擴展。當它被展開並點擊時，它會崩潰。

來源

2012-12-26 20:04:00 malkassem

當你使用jQuery時，爲什麼不簡單地使用'.toggle（）'而不是通過來回改變類來使它不復雜？ –

我該如何使用它？上課？其實，我真的沒有讓你！ :( – writeToBhuwan

和@malkassem ...當我點擊分區時，整個表格結構受到干擾..我不想那..我想調整更小的div到全尺寸div ..覆蓋所有其他三個div .. – writeToBhuwan

回答

相關問題