Javascript：使用原版 javascript 隐藏和显示文本

Question

我是 javascript 的新手。 我想要做的是使用 vanilla javascript 在点击时隐藏和显示一些文本。 我不知道我在做什么错这里是代码：

这是 HTML 代码：

<p class="h5 font-weight-normal">some text<span id="toggle-content" class="toggle- 
content" aria-hidden="true">some other text</span></p>
<a class="text-danger toggle-button" aria-controls="toggle-content">show more</a>

这是 javascript 代码：

const a = document.querySelector('.toggle-button');

if(a){
a.addEventListener('click', () => {
const content = document.querySelector('.toggle-content');
const ariaHidden = content.getAttribute('aria-hidden');

content.setAttribute('aria-hidden', ariaHidden === 'true' ? 'false' : 'true');

const atext = content.getAttribute('aria-hidden') === 'true' ? 'Show' : 'Hide';

a.innerHTML = `${atext} more`;
});
}

这是 css 代码：

.toggle-content {
display: none;
}

.toggle-content[aria-hidden="false"] {
display: block;
}

Answer 1

您在<p class="h5 font-weight-normal">some text<span id="toggle-content" class="toggle- <!-- here you have added a line break which should not be inside an attribute --> content" aria-hidden="true">some other text</span></p>

 const a = document.querySelector('.toggle-button'); if(a){ a.addEventListener('click', () => { const content = document.querySelector('.toggle-content'); const ariaHidden = content.getAttribute('aria-hidden'); content.setAttribute('aria-hidden', ariaHidden === 'true'? 'false': 'true'); const atext = content.getAttribute('aria-hidden') === 'true'? 'Show': 'Hide'; a.innerHTML = `${atext} more`; }); }

 .toggle-content { display: none; }.toggle-content[aria-hidden="false"] { display: block; }

 <p class="h5 font-weight-normal">some text<span id="toggle-content" class="toggle-content" aria-hidden="true">some other text</span></p> <a class="text-danger toggle-button" aria-controls="toggle-content">show more</a>

Answer 2

您的第一个 p 标签有问题，请正确写入此标签。 我尝试简化您的方法，尝试为您的元素添加/删除活动的 class，例如：

const a = document.querySelector('.toggle-button');
const content = document.querySelector('.toggle-content');

a.addEventListener('click', () => {
content.classList.includes('active') ? content.classList.remove('active') : content.classList.add('active');
});

.toggle-content {
display: none
}

.active {
display: block
}

为什么你使用 if(a)，可能是因为你的元素还没有出现，为了避免这样的情况，尝试将你的代码包装在document.onload中，它会在文档准备好时被调用。

Answer 3

我猜你弄错了。 改变这个：

const content = document.querySelector('.toggle-content');

至：

const content = document.querySelector('#toggle-content');

甚至更好

const content = document.getElementById('toggle-content');