javascript - CSS-Javascript : Show and Hide div

Question

我想创建一个只有标题并提供查看更多链接的菜单。 如果单击该链接，它应该打开一个隐藏的 div，并且该 View 应该更改为显示更少或关闭。如果我点击 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/

Answer 1

您只需检查该属性是否设置为阻塞，如果是则将其设置为无，否则将其设置为阻塞。所以你有一个切换逻辑。

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 标签上的引用:

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';
  }
}

请检查这个 fiddle :

https://jsfiddle.net/g7ry88h7/