Java腳本代碼（顯示更多 - 顯示更少）

我有一個代碼是假設從我的數據庫中顯示數據（傳記），但我很難將它放在一起，所以任何幫助將不勝感激。Java腳本代碼（顯示更多 - 顯示更少）

我想要做的是讓我的頁面只顯示讓我們說生物500字符然後當你點擊顯示更多部分它會擴展內容字符到最大。我還需要我的框，我的內容顯示也將被擴展。現在當點擊顯示更多時，我得到了兩次完全相同的文本，但沒有從我的數據庫中得到其他文本。比大家的幫助，這裏是我的代碼：

<h5>About:</h5> 
    <script type="text/javascript" language="JavaScript"><!-- 
    function HideContent(d) { 
    document.getElementById(d).style.display = "none"; 
    } 
    function ShowContent(d) { 
    document.getElementById(d).style.display = "list-item"; 
    } 
    function ReverseDisplay(d) { 
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } 
    else { document.getElementById(d).style.display = "none"; } 
    } 
    //--></script><p><?php echo $row->biography; ?><a href="javascript:ShowContent('uniquename')" backgorund="orange"> 
    ...show more 
    </a></p><br/> 
    <a href="javascript:ShowContent('uniquename')" backgorund="orange"> 

    </a> 
    <div id="uniquename" style="display:none;"> 
    <p><?php echo $row->biography; ?></p> 
    <a href="javascript:HideContent('uniquename')"> 
    show less 
    </a> 
    </div>

來源

2013-10-29 John Lee

當你顯示的所有內容，你也應該隱藏第一內容：

<a href="javascript:ShowContent('uniquename'); this.style.display = 'none'"> 
Show more.... 
</a>

的主要區別在於點擊show more時，它的加入this.style.display = "none"。

而且它的好，用onclick事件來實現這一

來源

2013-10-29 13:45:27

嘛，那肯定是發生，因爲你打印您#uniquename元素中完全相同的內容。

如果要截斷文本以在第一段中僅顯示其中的一小部分，則可以使用PHP的substr函數。在下面的例子中，我使用的是10個字符的限制：

<?php 
$content = 'lorem ipsum dolor sit amet'; 
if (strlen($content) > 10) { 
    echo substr($content, 0, 10) . '&hellip;'; 
} else { 
    echo $content; 
} 
?>

來源

2013-10-29 13:48:24

這將你在找什麼：

<body> 
    <p id="Content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 
    <script> 
     (function(){ 
      var content = document.getElementById("Content").innerHTML; 
      var shown; 
      var hidden; 
      var html; 
      if (content.length > 500) { 
       shown = content.substring(0, 499); 
       hidden = content.substring(500, content.length); 
       html = "<div id=\"shown\">" + shown + "<span id=\"showText\" onclick=\"showMore()\" style=\"cursor:pointer\">Show More</span></div><div id=\"hidden\" style=\"display:none;\">" + hidden + "<span id=\"hideText\" onclick=\"showLess()\" style=\"cursor:pointer;display:none;\">Show Less</span></div></div>" 
      } 
      else { 
       shown = content; 
       html = "<div id=\"shown\">" + shown + "</div>" 
      } 
      document.getElementById("Content").innerHTML = html; 
     })() 
     var showMore = function(){ 
      document.getElementById("hidden").setAttribute("style", "display:block;"); 
      document.getElementById("showText").setAttribute("style", "display:none;"); 
      document.getElementById("hideText").setAttribute("style", "display:block;cursor:pointer;"); 
     } 
     var showLess = function() { 
      document.getElementById("hidden").setAttribute("style", "display:none;"); 
      document.getElementById("showText").setAttribute("style", "display:block;cursor:pointer;"); 
      document.getElementById("hideText").setAttribute("style", "display:none;"); 
     } 
    </script>  
</body>

來源

2013-10-29 14:04:17

當然，大概有一百個不同的去了解這樣做的方式，但這是我能想到的最簡單的方式，它不使用任何外部庫，只是純JS和HTML。 –

我做了適當的改變，現在它正在工作，但如果點擊顯示更多的內容分散與底部的一個。它不會將桌子向下推。有任何想法嗎？ –

代碼丟失？你可以做一個jsfiddle併發送鏈接，以便我可以看看？謝謝。 –

Java腳本代碼（顯示更多 - 顯示更少）

回答

相關問題