单击div元素后如何显示其他文本？

Question

目前，我正在从事个人项目。您可以在这里看到我目前正在创建的网站：

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

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

我尝试添加一个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而不是可视性：hide，因为我不希望隐藏的文本占用空间，因为如果这样做，它可能会弄乱6个框的结构。

但是，此代码似乎没有执行我想要的操作，也就是说，根据单击的6个框中的哪一个，显示相应的进一步信息。以这种方式单击元素后如何显示更多文本？

Answer 1

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

只需更改

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

到

$("#fbAdCampaignText").toggle()

如果您只想触发clicked元素内部的div，那么：

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

Answer 2

好的，这里有几件事。首先，文档中的同一个ID不能超过1个，因此，如果这些段落中有6个，则丢失该ID并改用一个类。

使用ID还会给您带来特殊性问题，其中.display类仍然会被ID的样式所覆盖。

另一件事是在jQuery中，如果您使用类，则将在所有这些元素上切换类。您需要专门针对您单击的元素切换类，因此请使用$(this)-定位您单击的元素。

HTML：

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

CSS：

.fbAdCampaignText {
  display:none;
}

.fbAdCampaignText.display { // you would have had specificity issues with the id otherwise
    display:inline-block;
}

jQuery

$(".fbAdCampaigns").on('click', function(){
  $(this).toggleClass("display"); // only target the clicked element
});