如何使用 <div> 标签以使用javascript显示和隐藏jsp页面上的元素列表

Question

别名：abc，123 asdf，234 pmjklj，2345 showmorelink

（单击showmorelink剩余列表时应可见，如：-)

Somelablename: abc,123
               asdf,234
               pmjklj,2345      showlesslink
               gggg,4444
               hhhhh,55555

（单击showlesslink时，输出应与开头一样）

现在，我使用新行来显示更多元素，但是我需要知道如何在同一行中显示更多元素。

<tr id="show">
       <td><strong><h:outputText value="#{msg['label.lablename']}" /> </strong></td>
    <td >
          <c:forEach items="${ManagedBean.Map1 }" var="list">
       <a href="#" onclick="Display1('${list.key}');"> ${list.value}</a>
        </br>
      </c:forEach>                                          
    </td>   


  <td>
   <span id='ShowMore'>                                         
    <a href="#" onClick="showDetails('Details','ShowMore','more');return false"                                         
     <h:outputText value="#{msg['showmorelink']}" />                                            
      </a> </span>
  </td>                                             
</tr>



<tr id="Details">                                                       
<td>
 <c:forEach items="${ManagedBean.Map2 }" var="list">                                        
  <a href="#" onclick="Display1('${list.key}');">${list.value}</a></br></c:forEach>                                                                                     
</td>                                       
<td >                               
 <a href="#" onClick="showDetails('ShowMore','Details','less');return false;"
<h:outputText value="#{msg['showlesslink']}" />                             
</a>                                
</td>                               
</tr>       

Answer 1

试试这个代码可能会帮助您：

友情链接：

<div id="myList">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
   <a href="#">8</a>


</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

JS代码：

 $(document).ready(function () {
    size_li = $("#myList a").size();

    x=5;

    if (x==5) {
    $("#showLess").hide();
            }


    $('#myList a:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+3 <= size_li) ? x+3 : size_li;

  if (x>5) {
    $("#showLess").show();
            }

        if (x==size_li) {
    $("#loadMore").hide();
            } 
        $('#myList a:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-3<5) ? 5 : x-3;

        if (x<size_li) {
    $("#showLess").hide();    
    $("#loadMore").show();
            }

        $('#myList a').not(':lt('+x+')').hide();
    });
});

css：

#myList a{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}

结果：

http://jsfiddle.net/6FzSb/3278/