0

我将如何设计更多的阅读和更少的显示?我尝试设置#tag1 的样式,但这只是改变了首先出现的“阅读更多”文本

继承人的JS

<script>
function toggleAndChangeText(divId, tagId) {
     $("#"+divId).toggle();
     if ($("#"+divId).css('display') == 'none') {
          $('#'+tagId).html('Read More <i class="icon-circle-arrow-down"></i>');
     }
     else {
          $('#'+tagId).html('Show Less <i class="icon-circle-arrow-up"></i>');
     }
}

和html

        <a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
        <p>Read More <i class="icon-circle-arrow-down"></i></p> </a>

以下是每个部分的文本内容......

在此处输入图像描述

第一个是当您第一次看到按钮时。然后用户单击它并出现“少显示”,因为您可以看到该按钮位于更左侧,底部的填充更少。当用户然后关闭显示更少按钮时,阅读更多出现但与显示更少保持在同一位置。

我的问题是我将如何设计交互式阅读更多/显示更少的样式,以便它们处于第一个阅读更多的位置?抱歉,如果这令人困惑!

4

2 回答 2

1

尝试 :

$('#'+tagId).html('<p>Read More <i class="icon-circle-arrow-down"></i></p>');

我猜你的段落有填充或边距

实际上,您正在更换

<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
    <p>Read More <i class="icon-circle-arrow-down"></i></p> </a>

经过

<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
    Read More <i class="icon-circle-arrow-down"></i></a>
于 2013-07-25T15:13:54.747 回答
0

这将帮助您: 风格:

<style>
    #open{
    display: none;}
    </style>

HTML:

<p id="open">Content goes here</p>

<a href="javascript:void(0);" id="click1"><span class="text"><strong>Read More</strong><img src="icon-show.png" /></span><span class="text" style="display:none;"><strong>Show less</strong><img src="icon-hide.png" /></span></a>

Javascript:

 <script type="text/javascript">
    $(document).ready(function() {
    $('a#click1').click(function() {
      $('p#open').slideToggle();

    $('span.text').toggle();
       return false;
        });
         });
        </script>
于 2013-07-25T15:22:02.510 回答