javascript - 如何更改为显示：更改为阻止后无

Question

分区是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");

Answer 2

这是一个显示工作概念的jsfiddle：

http://jsfiddle.net/DjxM8/

$("#clickme").click(function() {
    $("#showme").toggle();
});

jQuery 的切换功能可能就是你想要的。

Answer 3

在 jQuery 中，您可以执行以下操作：

$('div').click(function(){
    if ($('div').css("display") == "block"){
        $('div').("display", "none");
    }
    else{
        $('div').("display", "block");
    }
});

编辑：对于这种特殊情况，切换方法更可取。如果您希望为事件添加超过 2 个结果，例如如果您想循环使用不同的背景颜色，我建议您按照我的方式进行操作（蹩脚的例子，但很重要）