jQuery的DIV展開/摺疊

我想自定義此示例這樣的方式：

展開給予的div應該發生在點擊而不是鼠標懸停。目前它在鼠標懸停。
點擊的div應該展開所有的div。也就是說，在上面的鏈接中，有9個div。如果我點擊任何div，它應該擴展到所有的div。
該行爲應該切換。如果我再次點擊展開的div，它應該縮小到原來的位置並使其他div可見。

任何示例代碼或鏈接將非常有幫助。我基本上試圖創建具有這種行爲的基於Windows 8風格的圖塊界面。

代碼

HTML：

<table cellpadding="0" cellspacing="0" border="0" class="tabellainizio" align="center"> 
    <tr> 
    <td><table cellpadding="0" cellspacing="1" border="0"> 
     <tr> 
     <td class="bordini"> 
     <div class="principale"> 
      <div class="contenitore"> 
       <div class="immagine">[immagine]</div> 
       <div class="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
      </div> 
     </div> 
     </td> 
     <td class="bordini"> 
     <div class="principale"> 
      <div class="contenitore"> 
       <div class="immagine">[immagine]</div> 
       <div class="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
      </div> 
     </div> 
     </td> 
     <td class="bordini"> 
     <div class="principale"> 
      <div class="contenitore"> 
       <div class="immagine">[immagine]</div> 
       <div class="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
      </div> 
     </div> 
     </td> 
     </tr> 
     <tr> 
     <td class="bordini"> 
     <div class="principale"> 
      <div class="contenitore"> 
       <div class="immagine">[immagine]</div> 
       <div class="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
      </div> 
     </div> 
     </td> 
     <td class="bordini"> 
     <div class="principale"> 
      <div class="contenitore"> 
       <div class="immagine">[immagine]</div> 
       <div class="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
      </div> 
     </div> 
     </td> 
     <td class="bordini"> 
     <div class="principale"> 
      <div class="contenitore"> 
       <div class="immagine">[immagine]</div> 
       <div class="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
      </div> 
     </div> 
     </td> 
     </tr> 
     <tr> 
     <td class="bordini"> 
     <div class="principale"> 
      <div class="contenitore"> 
       <div class="immagine">[immagine]</div> 
       <div class="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
      </div> 
     </div> 
     </td> 
     <td class="bordini"> 
     <div class="principale"> 
      <div class="contenitore"> 
       <div class="immagine">[immagine]</div> 
       <div class="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
      </div> 
     </div> 
     </td> 
     <td class="bordini"> 
     <div class="principale"> 
      <div class="contenitore"> 
       <div class="immagine">[immagine]</div> 
       <div class="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
      </div> 
     </div> 
     </td> 
     </tr> 
    </table></td> 
    </tr> 
</table>

的Javascript：

$(window).load(function(){ 
$('.contenitore').hover(function() { 
    $(this).animate({ 
     width: 300, 
     height: 400, 
     top: -80, 
     left: -45 
    }, 'fast'); 
    $(this).animate().css('box-shadow', '0 0 5px #000'); 
    $(this).css({ 
     zIndex: 100 
    }); 
}, function() { 
    $(this).animate().css('box-shadow', 'none') 
    $(this).animate({ 
     width: 210, 
     height: 240, 
     top: 0, 
     left: 0 
    }, 'fast'); 
    $(this).css({ 
     zIndex: 1 
    }); 
}); 
});

CSS：

.tabellainizio { 
    margin-top:100px; 
} 
.bordini { 
    border: 1px #DDD solid; 
} 
.principale { 
    height: 240px; 
    width: 210px; 
    position: relative; 
} 
.principale .contenitore { 
    background-color: #fff; 
    height: 240px; 
    width: 210px; 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
} 
.immagine { 
    border: 1px solid maroon; 
    margin: 15px auto; 
    height: 168px; 
    width: 168px; 
    position:relative; 
} 
.content { 
    display: none; 
    margin: 15px; 
} 
.contenitore:hover { 

} 
.contenitore:hover .content { 
    display: block; 
} 
.contenitore:hover .immagine { 
    position:relative; 
}

來源

2013-04-13 Jay Nanavaty

看就像一個大任務。這個問題應該遷移到_doThisForMe.stackoverflow.com_ –

@MohammadAdil嗨任何鏈接或資源就足夠了。我可以自己嘗試。只需要指向一些鏈接或資源。 –

http://api.jquery.com/click/ ,,,, http://api.jquery.com/toggle/ –

更換hover與toggle，獲得T的指數他點擊的元素父母td - >列數和tr - >的行號，移動點擊的元素的左上角：

$(window).load(function() { 
    $('.contenitore').toggle(function() { 

     $(this).css({ 
      'box-shadow': '0 0 5px #000', 
      zIndex: 100 
     }).animate({ 
      width: 212 * 3, 
      height: 242 * 3, 
      top: 0 - ($(this).parents('tr').index() * 242), 
      left: 0 - ($(this).parents('td').index() * 212) 
     }, 'fast'); 
    }, function() { 

     $(this).animate({ 
      width: 210, 
      height: 240, 
      top: 0, 
      left: 0 
     }, 'fast', function() { 
      $(this).css({ 
       zIndex: 1, 
       'box-shadow': 'none' 
      }); 
     }); 
    }); 
});

jsfiddle

來源

2013-04-13 08:46:52 razzak

謝謝@razzak。我遵循上面的adil的鏈接，只是使用點擊做了與此類似的操作。但是，您的解決方案使用的是乾淨的代碼。所以現在將遵循你的代碼並相應地修改它。非常感謝！好學。 –

jQuery的DIV展開/摺疊

回答

相關問題