JavaScript通过标记显示/隐藏元素

Question

我目前正在使用一个按钮，当点击它将显示或隐藏一个段落时，我想知道是否有可能在这里有一个链接而不是一个按钮？显然，标签没有onclick属性。但我更喜欢它只是一个被点击而不是按钮的链接。

我会尽量不要用很多代码给你太多烦恼。 html看起来像这样：

function showMore() {
	var dots = document.getElementById("dots");
	var moreText = document.getElementById("moreInfo");
	var moreText2 = document.getElementById("moreInfo2");
	var btnText = document.getElementById("moreLess");

	if (dots.style.display === "none") {
		dots.style.display = "inline";
		btnText.innerHTML = "See more information";
		moreText.style.display = "none";
		moreText2.style.display = "none";
	} else {
		dots.style.display = "none";
		btnText.innerHTML = "See less information";
		moreText.style.display = "inline";
		moreText2.style.display = "inline";
	}
    }

    <span id="dots">.......</span>

    <button onclick="showMore()" id="moreLess">See more Information</button>
    
    <p id="moreInfo" hidden> some text .</p>
    <p id="moreInfo2" hidden> some other text</p>

提前致谢

Answer 1

任何可见元素都可以有click事件（包括<a>元素），因此您只需将HTML切换为：

<a onclick="showMore()" id="moreLess">See more Information</a>

现在，你应该这样做吗？绝对不。原因是HTML是一种语义语言。这意味着我们使用最能描述内容的标签。锚标签描述导航并简单地将它们用作click事件的“钩子”是标签的错误用法。为您的内容使用正确的语义元素是允许各种设备知道如何处理该内容的关键。例如，视力残疾人依靠屏幕阅读软件来帮助他们上网冲浪。这些屏幕阅读器知道<a>元素意味着有一种方法可以在某处导航。如果您使用<a>元素，但不使用导航，则这些用户将获得错误的结果。

如果你想在视觉上看起来像链接而不是按钮，只需用span事件处理程序设置一个click标签。您甚至可以使用CSS为其提供与链接相同的悬停效果：

#moreLess { text-decoration:underline; color:blue; cursor:pointer; }
#moreLess:hover { color: red; }

<span onclick="showMore()" id="moreLess">See more Information</span>

最后，you really shouldn't be setting up your event handling with inline HTML event attributes（onclick）排在首位。这就是我们25年前做事件处理的方式，不幸的是，这种古老的技术不会因为人们只是复制其他人的代码而不知道他们正在复制什么，以及W3Schools那些仍在推广它的可怕网站而死亡。 。相反，您应该使用JavaScript进行所有事件处理，与HTML分开，如下所示：

document.getElementById("clickBait").addEventListener("click", function(){
  console.log("Thanks!");
});

#clickBait { cursor:pointer; text-decoration:underline; color:blue; }
#clickBait:hover { background-color:yellow; }

<span id="clickBait">Click me</span>

Answer 2

只需使用这样的点击事件处理程序。

document.addEventListener('click', (e) => {
  if (e.target.matches('#moreLess')) {
    showMore();
  }
});

function showMore() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("moreInfo");
  var moreText2 = document.getElementById("moreInfo2");
  var btnText = document.getElementById("moreLess");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "See more information";
    moreText.style.display = "none";
    moreText2.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "See less information";
    moreText.style.display = "inline";
    moreText2.style.display = "inline";
  }
}

<span id="dots">.......</span>

<a id="moreLess">See more Information</a>

<p id="moreInfo" hidden> some text .</p>
<p id="moreInfo2" hidden> some other text</p>

Answer 3

你可以为onclick标签添加<a>。如果你想把它看作链接，别忘了把href="#"

function showMore() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("moreInfo");
var moreText2 = document.getElementById("moreInfo2");
var btnText = document.getElementById("moreLess");

if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "See more information";
    moreText.style.display = "none";
    moreText2.style.display = "none";
} else {
    dots.style.display = "none";
    btnText.innerHTML = "See less information";
    moreText.style.display = "inline";
    moreText2.style.display = "inline";
}
}

<span id="dots">.......</span>

<a href="#" onclick="showMore()" id="moreLess">See more Information</a>

<p id="moreInfo" hidden> some text .</p>
<p id="moreInfo2" hidden> some other text</p>