获取一些 div 文本块以在单击加号按钮时显示

Question

我正在研究 wordpress 成本核算表格，但由于我使用文本描述来解释产品，因此我在响应式视图中遇到了困难。 您是否可能知道一些代码，我可以在产品标题旁边放置一个加号按钮。 当我按下加号按钮时，小描述将显示在标题下方。有多个带有标题和小描述的产品。 我已经做了两个截图来展示我的意思它的外观如何用小描述https://pasteboard.co/xNRq4SCqcYpp.png 。 我如何需要它看起来https://pasteboard.co/20OrgDInhwWa.png 。

我认为如果 lfb_itemBloc 包含 lfb_itemDes 显示 none 并生成一个加号图标并且仅在单击加号按钮时显示 lfb_itemDes 将是一个 if 语句。

有问题的代码如下

<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture">

<div data-imagetype="" data-urlvariable="1" data-sentattribute="price" data-       variablename="" data-shadowfx="0" data-html="true" class="lfb_selectable" >

<img data-no-lazy="1" data-tint="false" src="https://testing.secureyourticket.com/wp-content/plugins/WP_Estimation_Form/assets/img/placeholder.png" alt="" class="lfb_selectableImg img .png">
<span class="fas fa-times  icon_select"></span>
</div>

<p class="lfb_imgTitle ">Google Analytics</p><p class="lfb_itemDes " style="
">Set up Google analytics on your site and install tracking codes/tags as needed to view visitors/sessions and site engagement.</p>

</div>

提前致谢

Answer 1

这很简单。 假设 HTML 将首先被写入，并且您需要在事后执行所有这些操作 - 首先插入图标，然后应用单击操作。 在那我们可以通过.closest()和.find()找到相关的描述。 然后你也可以切换字体真棒图标。

 let insert = `<span class="fa fa-plus expand-icon"></span>`; $(function() { $(insert).insertBefore('.lfb_imgTitle'); $('.expand-icon').click(function() { $(this).closest('.lfb_item').find('.lfb_itemDes').toggle(); if ($(this).hasClass('fa-plus')) $(this).removeClass('fa-plus').addClass('fa-minus'); else $(this).removeClass('fa-minus').addClass('fa-plus'); }) })

 img { width: 50px; }.lfb_itemDes { display: none; }.expand-icon { cursor: pointer; float: right; }.lfb_item { width: 300px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" /> <div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture"> <p class="lfb_imgTitle">Google Analytics</p> <p class="lfb_itemDes" style=" ">Set up Google analytics on your site and install tracking codes/tags as needed to view visitors/sessions and site engagement.</p> </div>

Answer 2

没那么复杂。 在许多不同的方式中，您可以执行以下变体。

 var elmt = document.querySelector(".stg"), desc = document.querySelector(".desc"); elmt.addEventListener("click", e => desc.style.display = desc.style.display === "block"? "none": "block");

 .stg { pointer-events: none; }.stg:after { content: " +"; pointer-events: all; }.desc{ content: "Some Description"; display: none; font-size: 0.67em; }

 <div class="stg">Some context</div> <div class="desc">Description on the topic</div>