CSS-Javascript：显示和隐藏div

Question

我想创建一个菜单，其中仅包含标题，并提供查看更多链接。 如果单击该链接，则应打开一个隐藏的div，并且该视图应更改为更少或关闭。 如果我单击该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';
}

要将文本设置为View Less ，需要引用click标记，将其作为参数传递，如下所示：

<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/

Answer 2

功能简单。 单击以调用它，它将处理隐藏/显示：

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

Answer 3

这是一个工作示例。

 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> 

Answer 4

$('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');
   }
}),