目前,我正在做一个个人项目。您可以在这里看到我目前正在创建的网站:

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();
});

09-11 07:39
查看更多