我将如何设计更多的阅读和更少的显示?我尝试设置#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>
以下是每个部分的文本内容......
第一个是当您第一次看到按钮时。然后用户单击它并出现“少显示”,因为您可以看到该按钮位于更左侧,底部的填充更少。当用户然后关闭显示更少按钮时,阅读更多出现但与显示更少保持在同一位置。
我的问题是我将如何设计交互式阅读更多/显示更少的样式,以便它们处于第一个阅读更多的位置?抱歉,如果这令人困惑!