我有这个代码可以打印出最多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;"> </div>
</div>
</div>
答案 0 :(得分: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>
如果使用的on
高于live
,请使用 jQuery
而不是1.7
。
小提琴:http://jsfiddle.net/eznnC/(虽然隐藏不起作用,但我相信它会在正常环境中)。
答案 1 :(得分: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; ?>