设置javascript函数样式*显示/隐藏*CSS/HTML/JS

我该如何设计更多的阅读和更少的展示？我尝试过设置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>');
     }
}

函数toggleAndChangeText（divId，tagId）{
$（“#”+divId）.toggle（）；
如果（$（“#”+divId）.css（'display'）=='none'）{
$（'#'+tagId）.html（'readmore'）；
}
否则{
$（'#'+tagId）.html（'Show Less'）；
}
}

还有html

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

以下是每一节中的文本内容

第一个是当你第一次看到按钮的时候。 然后用户单击它，就会出现“Show Less”（显示较少），因为您可以看到按钮更靠左，底部的填充更少。当用户关闭show less按钮时，read more会出现，但与show less保持相同的位置

我的问题是，我将如何设计交互式多读/少显示的样式，使它们处于第一个多读的位置？抱歉，这让人困惑

试试看：

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

$（'#'+tagId）.html（'readmore
'）；

我猜你的段落有空白或空白

事实上，你正在替换

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

借

这将帮助您： 风格：

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

#打开{
显示：无；}

HTML:

内容在这里

Javascript:

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

    $('span.text').toggle();
       return false;
        });
         });
        </script>

$（文档）.ready（函数（）{
$（'a#click1'）。单击（函数（）{
$（'p#open'）。滑动切换（）；
$（'span.text'）.toggle（）；
返回false；
});
});

请为我们提供一份JSFIDLE

<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>

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

    $('span.text').toggle();
       return false;
        });
         });
        </script>