1

我有这个代码可以打印出多达 4 个服务提供商。单击后，该框会展开并显示其余部分（如果还有更多）。我想要做的是如果有超过 4 个条目，打印更多链接，以便用户知道点击更多。我还需要更多按钮在单击时消失并在重新单击时重新出现。

谁能帮我。这真让我抓狂

感谢您提前提供的帮助。

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

2 回答 2

0

仅使 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-30T19:18:39.803 回答
0

所以，试试这个修改：

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

现在让我们假设您正在使用jQuery添加：

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

使用 functionon而不是liveif You are using jQueryHigher then 1.7。

小提琴： http: //jsfiddle.net/eznnC/（虽然隐藏不起作用但我相信它会在正常环境中）。

于 2013-04-30T18:51:00.970 回答