目前,我正在做一个个人项目。您可以在这里看到我目前正在创建的网站:
https://codepen.io/JoyFulCoding/pen/EzWyKv
问题是我正在努力添加以下功能。该功能是当用户单击6个彩色框中的任何一个时,进一步的信息部分应显示如下:
我尝试添加一个ID最初显示为无的段落。当用户单击其中一个框时,应显示该主题的相应文本。
的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而不是visible:hide,因为我不希望隐藏的文本占用空间,因为如果这样做的话,可能会弄乱6个框的结构。
但是,此代码似乎没有执行我想要的操作,也就是说,根据单击的6个框中的哪一个,显示相应的进一步信息。以这种方式单击元素后如何显示更多文本?
最佳答案
你是这个意思吗
https://codepen.io/dravas/pen/NVgvgN?editors=1010
只是改变
$("#fbAdCampaignText").toggleClass("display")
至
$("#fbAdCampaignText").toggle()
而且,如果您只想触发clicked元素内的div,则:
$(".fbAdCampaigns").on('click', function(){
$(this).find("#fbAdCampaignText").toggle();
});