css-javascript：顯示和隱藏div

我想創建一個菜單，其中只有標題和視圖更多鏈接提供。如果該鏈接被點擊，它應該打開一個隱藏的div，並且該視圖應該更改爲顯示較少或關閉。如果我點擊該div應該再次關閉。到目前爲止，我有這個。css-javascript：顯示和隱藏div

Title 1 <a href="#" onclick="showdiv()">View More</a> 
<div id="title1_div"> 
Some Information 
</div> 

<style> 
#title1_div{ 
display:none; 
} 
</style> 

<script> 
function showdiv() 
{ 
document.getElementById('title1_div').style.display = 'block'; 
} 
</script>

這隻提供點擊顯示分區。點擊時如何關閉該div。

任何幫助，將不勝感激。

請看這個例子在的jsfiddle：https://jsfiddle.net/eo4cysec/

來源

2016-07-21 Prathamesh Prabhudesai

你做的你做了什麼 –

你剛纔檢查屬性被設置爲禁止，如果是這樣你將其設置爲無，否則你將其設置爲阻止。所以你有一個切換邏輯。

if(document.getElementById('title1').style.display == 'block') { 
    document.getElementById('title1').style.display = 'none'; 
} else { 
    document.getElementById('title1').style.display = 'block'; 
}

要設置的文字查看更少你需要點擊標籤的參考，你把它作爲參數是這樣的：

<a href="#" onclick="showdiv(this)">View More</a>

然後，你必須使用此參數的機會，設置它的innerHTML，這是顯示的文本。所以最終的功能看起來像這樣，在e現已在a -tag參考：

function showdiv(e) { 
    if(document.getElementById('title1').style.display == 'block') { 
    e.innerHTML = 'View More'; 
    document.getElementById('title1').style.display = 'none'; 
    } else { 
    e.innerHTML = 'View Less'; 
    document.getElementById('title1').style.display = 'block'; 
    } 
}

請看看這個小提琴：

https://jsfiddle.net/g7ry88h7/

來源

2016-07-21 03:20:42 ScientiaEtVeritas

未能將錨點的文本從「查看更多」更改爲「顯示更少」或「關閉」。 – Pugazh

$('a').click(function() { 
    $(this).next('div').stop(true, true).slideToggle("fast"); 

if($(this).html() == 'View More'){ 
     $(this).html('View Less'); 
    } else { 
     $(this).html('View More'); 
    } 
}),

來源

2016-07-21 03:17:33

我不認爲他使用jQuery相反的，所以......還沒有的jQuery的標籤。 – ScientiaEtVeritas

很高興看到您的答案。也許提到「使用jQuery的解決方案」，OP沒有包含jQuery標籤。 – Pugazh

對不起，是的，我應該提到這是一個jQuery解決方案。 –

簡單的功能。點擊它，它會處理隱藏/顯示：

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
}

來源

2016-07-21 03:21:36 Sami

未能將錨點的文本從「查看更多」更改爲「顯示更少」或「關閉」。 – Pugazh

這是一個工作示例。

function showdiv(el) { 
 
    if (el.innerHTML == "View More") { 
 
    document.getElementById('title1').style.display = 'block'; 
 
    el.innerHTML = "Show Less"; 
 
    } else { 
 
    document.getElementById('title1').style.display = 'none'; 
 
    el.innerHTML = "View More"; 
 
    } 
 
}

#title1 { 
 
    display: none; 
 
}

Title 1 
 
<div id="title1"> 
 
    Some Information 
 
</div> 
 
<a href="#" onclick="showdiv(this)">View More</a>

來源

2016-07-21 03:22:23 Pugazh

css-javascript：顯示和隱藏div

回答

相關問題