Collapsable div - 刪除圖片繼續前進

可能是簡單的事情，但它似乎特別是我的版本，我沒有找到任何解決方案。Collapsable div - 刪除圖片繼續前進

這個簡單的div顯示一個大圖片，標題和長文本。我希望如果你點擊圖片，它會拼接/刪除網站上的所有內容，因此會有更多的空間。但是 - 標題應該仍然保留（可能以更小的格式）。

我試圖讓它與javascript摺疊，但我不能真正讓它工作，標題停留在那裏，即使其餘的被刪除。由於標題需要保留，因此如果需要再次點擊標題，您可以將其重新標記。

我想用CSS/Javascript做到這一點，沒有Angular.JS或類似，你們有沒有解決方案？

<div id="header"> 
    <img src="img/logo.png"></img><br> 
    <h3>HEADING</h3><br> 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
</div>

來源

2017-04-21 Marcel Leonhard

你能在HTML改變？ –

你已經試過了什麼？正如你所說'我試圖讓它與javascript'摺疊，任何代碼？這樣你可以從解決方案中更好地學習。 –

讓我看看你在JavaScript中嘗試過什麼。我會幫你:)'我試圖讓它與javascript'崩潰， –

您必須將點擊事件放到您要單擊的元素上，單擊後才能執行該功能。我已將id屬性添加到圖片標頭，以便能夠使用javascript獲取它。

<div id="header"> 
 
    <img id="imageInHeader" src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]" onclick="hideMe()"></img><br> 
 
    <h3 onclick="showMe()">HEADING</h3><br> 
 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
 
</div> 
 

 
<script> 
 
function hideMe() { 
 
    document.getElementById('imageInHeader').style.display = 'none'; // removes the element from the layout 
 
    // document.getElementById('imageInHeader').style.visibility = 'hidden' // hides the element, doesn't affect layout 
 
} 
 

 
function showMe() { 
 
    document.getElementById('imageInHeader').style.display = 'block'; 
 
    // document.getElementById('imageInHeader').style.visibility = 'visible' 
 
} 
 
    
 
</script>

來源

2017-04-21 11:01:07 boroboris

我不知道爲什麼downvote自這個例子工作。 – boroboris

這是完美的！像魅力一樣工作，謝謝！唯一奇怪的是，當使用HEADING的顯示功能時，它確實在標題和上面的標誌之間創造了更多的空間。也在這個片段中，不是嗎？ –

我不這麼認爲。我檢查了鉻開發工具，它看起來是一樣的。您正在使用哪種瀏覽器？ – boroboris

-1

<div id="header" id="collapseThisDiv"> 
    <img src="img/logo.png"></img><br> 
    <h3>HEADING</h3> 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
</div> 
<div id="header" id="expandThisDiv"> 
    <img src="img/logo.png"></img><br> 
    <h3>HEADING</h3> 
</div>

在「圖像」點擊，隱藏上述股利和顯示較低的DIV，反之亦然。這也不會出現在該標題的方法是坍塌的任何時間。

來源

2017-04-21 11:04:31 Bharat

檢查了這一點
的情況下，你都不能進入您的HTML

$('#image').click(function() { 
 
    $("#header #image").css("display", "none"); 
 
    $("#header .text-muted").css("display", "none"); 
 
    
 
}); 
 
$('#header h3').click(function() { 
 
    if($("#header #image").css("display") == "none"){ 
 
    $("#header #image").css("display", "block") 
 
    } 
 
    if($("#header .text-muted").css("display") == "none"){ 
 
    $("#header .text-muted").css("display", "block") 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <img id="image" src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"></img><br> 
 
    <h3>HEADING</h3><br> 
 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
 
</div>

希望這個解決您的問題
感謝

來源

2017-04-21 11:08:24

Collapsable div - 刪除圖片繼續前進

回答

相關問題