更改为阻止后如何更改为display:none

Question

Div是 display: none;

当我点击链接或图像时,我改为display: block;工作正常.

当我点击相同的图标或链接时,我希望它能够显示.

因此,如果链接处于活动状态,则会显示Div,然后单击返回链接更改显示选项.

Answer 1

运用

<a href="#" id="toggleLink">Show</a>

你可以这样做:

简单的JS

Live Demo

window.onload=function() {
  document.getElementById("toggleLink").onclick=function() {
    var div = document.getElementById("someDiv");
    var show = div.style.display;
    div.style.display = show=="none"?"block":"none";
    return false;
  }
  div.style.display="none"; // init
}

jQuery的:

Live Demo

$(function() {
  $("#toggleLink").on("click",function(e) {
    e.preventDefault(); 
    $("#someDiv").toggle();
  });
});

如果要将文本从"显示"切换为"隐藏",请在返回false之前将其添加到普通JS

    this.innerHTML=div.style.display=="none"?"Show":"Hide";

这对jQuery来说

$(this).text($("#someDiv").is(":visible")?"Hide":"Show");