阅读更多/更少内容的按钮

Posted 2023-02-16

【中文标题】阅读更多/更少内容的按钮

【英文标题】：Read more/less button for multiple content

【发布时间】：2020-09-23 15:33:17

【问题描述】：

由于基于this example 的纯 CSS 的更多/更少按钮，我一直在尝试显示几张工作表，这是为Pure CSS - Read more/Read Less images 建议的解决方案之一。显示第一张纸没有问题。但对其他人来说，它不起作用。每次我点击“阅读更多”按钮时，只会出现第一张纸。我想我需要更改 id input 参考。如您所见，<xsl:for-each select="./@xml:id"> 是另一张纸。

这是xsl 部分：

<xsl:template match="Name of the template">
        <xsl:for-each select=".">
            <xsl:if test="count(./key('whatAction-subCat', @xml:id)) != 0">
                <li>
                    <!-- some data -->
                    <br />
                    <xsl:call-template name="whatResult"/>
                </li>
            </xsl:if>

        </xsl:for-each>
    </xsl:template>


<xsl:template name="whatResult">
        <input type="checkbox" class="read-more-state" id="result" />
        <div class="read-more-wrap">
            <xsl:text>Read</xsl:text>
            <span class="read-more-target">
                <table class="table-2">
                    <caption>What Result</caption>
                    <tr>
                        <th>Occur. in</th>
                        <th>What Role</th>
                        <th>What Context</th>
                        <th>What Sphere</th>
                    </tr>
                    <xsl:for-each select="./@xml:id">
                        <!-- verb competition -->
                        <xsl:call-template name="contend"/>
                        <!-- verb motion -->
                        <xsl:call-template name="self_motion"/>
                        <xsl:call-template name="arriving"/>
                        <!-- etc -->
                        ...
                    </xsl:for-each>
                </table>
            </span>
        </div>
        <label for="result" class="read-more-trigger"></label>
    </xsl:template>

几个打印屏幕以便更好地理解：show less btn、show more btn 和 show more of several btn。 正如您将看到的，另一个问题是隐藏内容和更多按钮之间的空间。我需要查看 CSS——一次一步...

提前，非常感谢您的帮助！

凡妮莎

【参考方案1】：

我找到了以下解决方案： 我主要关心的是根据用户的请求显示一长串数据。因此，我选择基于此example 的模态解决方案。为了避免显示同一张表，我给每个<xsl:template name="A NAME>添加了模态解决方案。

<!-- I call the templates where I add the modal solution -->
 <xsl:template match="category[@corresp]">    
   <xsl:for-each select="./@xml:id">
      <!--to display content in each sub-category, ex. 'contend', 'self_motion' -->    
         <xsl:if test=".!contains(., 'contend') and  //ref[@corresp='#contend'] ">
             <xsl:call-template name="contend"/>
         </xsl:if>
         <xsl:if test=".!contains(., 'self_motion') and  //ref[@corresp='#self_motion'] ">
             <xsl:call-template name="self_motion"/>
         </xsl:if>
    </xsl:for-each>
 </xsl:template>
 <!-- some templates of data with the modal solution -->```
 <xsl:template name="contend">
    <div id="contend">
    </div>
    <a href="#modal-container-contend" aria-label="Open Navigation">
        <xsl:text>Read the detailed structural unit for this sub-category</xsl:text>
    </a>
    <div id="modal-container-contend">
        <div class="modal">
            <table class="table-2">
                <caption>What Result</caption>
                <tr>
                    <th>Occur. in</th>
                    <th>What Role</th>
                    <th>What Context</th>
                    <th>What Sphere</th>
                    <th style="text-align: center">What Behavior</th>
                </tr>
                <xsl:for-each
                    select="//ref[@corresp = '#contend']/ancestor::node()/../following-sibling::ref[@n = '2']">
                    <xsl:call-template name="following-subCatVerb"/>
                </xsl:for-each>
            </table>
            <a href="#contend" aria-label="Close Modal">close</a>
        </div>
    </div>
</xsl:template>
<xsl:template name="self_motion">
    <div id="self_motion">
    </div> 
    <a href="#modal-container-self-motion" aria-label="Open Navigation">
        <xsl:text>Read the detailed structural unit for this sub-category</xsl:text>
    </a>
    <div id="modal-container-self-motion">
        <div class="modal">
            <table class="table-2">
                <caption>What Result</caption>
                <tr>
                    <th>Occur. in</th>
                    <th>What Role</th>
                    <th>What Context</th>
                    <th>What Sphere</th>
                    <th style="text-align: center">What Behavior</th>
                </tr>
                <xsl:for-each
                    select="//ref[@corresp = '#self_motion']/ancestor::node()/../following-sibling::ref[@n = '2']">
                    <xsl:call-template name="following-subCatVerb"/>
                </xsl:for-each>
            </table>
            <a href="#self_motion" aria-label="Close Modal">close</a>
        </div>
    </div>
 </xsl:template>
 <!-- the same logic for same sheets of data-->

以及模态解决方案的 CSS：

#modal-container-contend, 
#modal-container-self-motion,
#modal-container-arriving,
#modal-container-satisfying position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; display: flex;

.modal width: 70%; background: #fff; padding: 20px; text-align: center;

#modal-container-contend:not(:target), 
#modal-container-self-motion:not(:target),
#modal-container-arriving:not(:target),
#modal-container-satisfying:not(:target) opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s;

#modal-container-contend:target, 
#modal-container-self-motion:target,
#modal-container-arriving:target,
#modal-container-satisfying:target opacity: 1; visibility: visible; transition: opacity 1s, visibility 1s;