切換點擊圖像的父容器

我正在構建佈局並需要某個功能的幫助。要求是有一個容器是288px（高度），並保存576px（高度）的圖像。一旦用戶點擊該父容器上的任何位置，圖像保持相同高度，但父容器在全部576px和半幅288px之間切換。因此圖片始終是相同的高度，但父容器會顯示圖片的一半（在頁面加載時），或者當用戶點擊它時，它會顯示完整的高度。現在我似乎無法弄清楚這一部分，並且在容器與其一起流動時，圖像變形高度。眼下的造型看起來像這樣切換點擊圖像的父容器

HTML（超薄）

.persona-banner 
    img#perImg.sm-img [alt='Persona Banner' ng-src="{{ persona.banner }}"]

CSS（類之間切換）

.persona-banner { 
    height: 576px; 
    margin-top: -88px; 
    z-index: -1; 
    img { position: absolute; } 
    } 

    .lrg-img { 
    height: 576px; 
    width: 1024px; 
    } 

    .sm-img { 
    height: 288px; 
    width: 1024px; 
    }

jQuery的

$('img#perImg').click(function() { 
     $(this).toggleClass("sm-img lrg-img", 1000); 
     if ($(this).hasClass('sm-img')) { 
     // moving other elements with the switch 
     $('.persona-header-bottom').css('margin-top', '-400px'); 
     } else { 
     $('.persona-header-bottom').css('margin-top', '-130px'); 
     } 
    });

我試過的一些選項除了這個以外，還包含了其他所有容器，它們將切換persona-banner容器，添加一個隱藏的溢出-y，並添加不同的圖像和父容器定位。

如果有人可以幫助，那將是非常讚賞:)

來源

2016-06-18 James N

你只需要改變div.persona-banner不是圖像的高度，將使得其overflow:hidden隱藏其餘圖像時的高度爲288px

https://jsfiddle.net/gtq6nL2a/

.persona-banner { 
    height: 288px; 
    z-index: -1; 
    overflow:hidden; 
} 

.persona-banner img { 
    height: 576px; 
    width: 1024px; 
    margin-top:-144px; 
} 

.persona-banner.active{ 
    height:576px; 
} 

.persona-banner.active img { 
    margin-top:0; 
}

，並在腳本中，我們將切換active類爲div.persona-banner這將改變其height

$('.persona-banner').click(function() { 
    $(this).toggleClass('active'); 
});

來源

2016-06-18 20:11:16

你誤會toggleClass是如何工作的，它並沒有這兩個類之間的交換，它添加或在同一時間刪除他們兩個。

而且第二PARAM只能是真或假，而不是1000

http://api.jquery.com/toggleclass/

來源

2016-06-18 20:00:54

切換點擊圖像的父容器

回答

相關問題