javascript - 单击 div 元素后如何显示更多文本？

Question

目前我正在做一个个人元素。你可以在这里看到我目前正在制作的网站:

https://codepen.io/JoyFulCoding/pen/EzWyKv

问题是我正在努力添加以下功能。该功能是当用户单击 6 个彩色框中的任何一个时，将显示如下所示的更多信息部分:

我尝试添加一个带有 id 的段落，该 id 最初将其显示设置为 none。当用户单击其中一个框时，应显示该主题的相应文本。

HTML

<p id="fbAdCampaignText> Example Text here </p>

CSS

#fbAdCampaignText {
    display:none;
}

.display {
    display:inline-block;
}

jQuery

 $("#fbAdCampaigns").on('click', function(){
     $("#fbAdCampaignText").toggleClass("display");
     });

注意:我使用 display:none 而不是 visibility:hide 是因为我不希望隐藏文本占用空间，因为如果占用空间，它可能会弄乱 6 个框的结构。

但是，这段代码似乎并没有达到我想要的效果，即根据单击 6 个框中的哪一个显示相应的更多信息。以这种方式单击元素后如何显示更多文本？

Answer 1

你是说这个？ https://codepen.io/dravas/pen/NVgvgN?editors=1010

只是改变

$("#fbAdCampaignText").toggleClass("display")

到

$("#fbAdCampaignText").toggle()

如果你只想触发点击元素内的那个 div，那么:

$(".fbAdCampaigns").on('click', function(){
  $(this).find("#fbAdCampaignText").toggle();
});