항목 수에 따라 추가 링크 추가

최대 4 개의 서비스 공급자를 인쇄하는이 코드가 있습니다. 한 번 클릭하면 상자가 펼쳐지고 나머지가있는 경우 나머지가 표시됩니다. 내가 뭘 하려는지는 4 개 이상의 항목이있는 경우 더 많은 링크를 인쇄하여 사용자가 더 많은 것을 알 수 있도록하는 것입니다. 다시 클릭했을 때 More 버튼이 사라지면 다시 클릭해야합니다.항목 수에 따라 추가 링크 추가

아무도 도와 줄 수 있습니까? 이것은 나를 미치게합니다.

미리 도움을 주셔서 감사합니다.

<?php 
/** 
* @file 
*/ 
?> 
<head> 
<script> 
    var remove=function(){ 
     $('#ID_OF_BUTTON').hide(500); 
    } 
</script> 
</head> 
<div class="cloud-computing-item"> 
    <div class="container"> 
    <div class="item-header"> 
     <h3> <?php print $company['name'] ?> </h3> 
    </div> 
    <div class="item-subheader">  
     <div class="label">Services Offered:</div> 
     <div class="data service-offerings"> 
     <?php 
     foreach($company['services_display'] as $service => $element){ 
      print $element; 
     } 
     ?> 
     </div> 
    </div> 
    <div class="item-body"> 
     <div class="overview"> 

     <div class="label">Cloud Providers:</div> 
     <div class="data"> 
      <?php 
      //limit shown entries upto 4 
      foreach(array_slice($company['service_providers'], 0, 4) as $provider): ?> 
      <div> 
       <?php print $provider; ?> 
      </div> 
      <?php endforeach; ?>   
      <div id="show"style="color:#000099;font-weight:bold; margin-bottom:-13px;"></div> 

      <!--<div id="show"style="color:#000099;font-weight:bold; margin-bottom:-13px;"><a onclick="remove(); return true;">More</a></div> 
      <div id="hide"style="color:#000099;font-weight:bold; margin-bottom:-12px; display: none;"><a onclick="add(); return true;">Hide</a></div> --> 

     </div> 
     </div> 
     <div class="details"> 
     <?php 
      // if entries are greater then 4, show the rest 
      foreach(array_slice($company['service_providers'], 4) as $provider): ?> 
      <div> 
       <?php 
       print $provider; 
       ?> 
      </div> 
      <?php endforeach; ?> 
     <?php print theme('cloud_computing_item_details', array('company' => $company)); ?> 
     </div> 
    </div> 
    <div style="clear: both; height: 5px;">&nbsp;</div> 
    </div> 
</div>

출처

2013-04-30 Alan

그래서,이 수정 시도 :의 당신은 추가 jQuery를 사용한다고 가정하자 이제

<div class="label">Cloud Providers:</div> 
<div class="data"> 
    <?php $i = 0; ?> 
    <?php foreach($company['service_providers'] as $provider): ?> 
    <div<?php echo ($i > 3) ? ' class="hide"' : ''; ?>><?php print $provider; ?></div> 
    <?php $i++; ?> 
    <?php endforeach; ?> 
    <?php if(count($company['service_providers']) > 4):?> 
    <div class="show-more" style="color:#000099;font-weight:bold; margin-bottom:-13px;">Show More</div> 
    <?php endif; ?> 
</div>

을이 :

<script type="text/javascript"> 
$(document).ready(function(
    $('.hide').hide(); // this will hide all the elements with the class 'hide' 

    $('.show-more').live('click', function(){ 
     var parent = $(this).parent(); 
     parent.find('.hide').show().removeClass('hide').addClass('show'); 
     $(this).text('Show Less').removeClass('show-more').addClass('show-less'); 
    }); 

    $('.show-less').live('click', function(){ 
     var parent = $(this).parent(); 
     parent.find('.show').hide().removeClass('show').addClass('hide'); 
     $(this).text('Show Less').removeClass('show-less').addClass('show-more'); 
    }); 
){}); 
</script>

사용 기능 on 대신 live 당신은 jQuery를 사용하는 경우 그 다음에 1.7.

피들 : http://jsfiddle.net/eznnC/ (은폐가 작동하지 않지만 정상적인 환경에서는 가능하다고 생각합니다.)

출처

2013-04-30 18:51:00 shadyyx

미안. 솔루션은 좋아 보이지만 전체 페이지가 망가졌습니다. – Alan

@Alan 페이지를 제동해야하는 문제는 보이지 않습니다 ... 아마도 당신은 그것을 잘못 사용했습니다 ... – shadyyx

은 당신이 쓰는 것처럼 사용되었습니다. 섹션이 모두 열리고 오른쪽으로 증가합니다. 이것은 내가 방금 작업을 시작한 사용자 정의 모드의 일부입니다. 나는 모든 것이 작동하는 몇 가지 부분을 제외하고는 그것을 설계하거나 설계하지 않았다. 입력 해 주셔서 감사합니다. – Alan

첫 번째 부분 만 4 개 이상을 만들려면 추가 링크는 아래에 있습니다. 링크가 현재 사라지지 않고 다시 나타나지 않습니다.

<?php 
      //limit shown entries upto 4 
      foreach(array_slice($company['service_providers'], 0, 4) as $provider): ?> 
      <div> 
       <?php print $provider; ?> 
      </div> 
      <?php endforeach; ?> 

      <?php 
      // shows a More link for companies with more than for providers 
      foreach(array_slice($company['service_providers'], 4, 1) as $provider): ?> 
      <div> 
       <div id="more" style="color:#000099;font-weight:bold; margin-bottom:-13px;"> 
       <?php print ('<a onclick="">More</a>'); ?> 
       </div> 
      </div> 
      <?php endforeach; ?>

출처

2013-04-30 19:18:39 Alan

항목 수에 따라 추가 링크 추가

답변

관련 문제