我希望将类别显示为带有更多功能的手风琴。 第一次，我想只显示3-4个类别，想要在点击加载更多链接后显示剩余的类别。如果再次点击链接，它应该减少负载。
参考。请看屏幕截图：https://drive.google.com/file/d/0B4PokeydRXWebHJabmdXbFVtY2M/view
我正在使用以下代码：
<div class="cat-dropdown" style="margin:25px 0; width:100%; float:left; clear:both">
<?php
$parentCatId = Mage::registry('current_category')->getId();
$root = Mage::getModel('catalog/category')->load($parentCatId);
$subCat = explode(',',$root->getChildren());
$collection = $root
->getCollection()
->addAttributeToSelect("*")
->addFieldToFilter("entity_id", array("in", $subCat) );
?>
<div class="products-grid first odd brand_list1">
<?php foreach($collection as $catname){
$qty = Mage::getModel('catalog/category')->load($catname->getId())->getProductCount();?>
<div class="selected item<?php if (($i - 1) % $_columnCount == 0): ?> first<?php elseif ($i % $_columnCount == 0): ?> last<?php endif; ?>">
<div class="cat-custom-img">
<h2 class="lavel-1"><a href="<?php echo $catname->getUrl(); ?>"><?php echo $catname->getName(); ?></a></h2>
<?php if($catname['sliderimage']) { ?>
<img src="<?php echo Mage::getBaseUrl('media').'catalog/category/'.$catname['sliderimage']; ?>" alt= "" >
<?php } ?>
</div>
<?php $_category = Mage::getModel('catalog/category')->load($catname->getId()) ?>
<?php $_subcategories = $_category->getChildrenCategories() ?>
<?php if (count($_subcategories) > 0){ ?>
<div class="catlist-toggle">
<div class="catlist-toggle-inner">
<ul class="second_level_cat myList">
<?php $limit=1; ?>
<?php foreach($_subcategories as $_subcategory){ ?>
<li class="hide">
<h2><a href="<?php echo $_subcategory->getUrl(); ?>">
<?php echo $_subcategory->getName(); ?>
</a>
</h2>
<?php $_subcategory1 = Mage::getModel('catalog/category')->load($_subcategory->getId()) ?>
<?php $_subsubcategories1 = $_subcategory1->getChildrenCategories() ?>
<?php if (count($_subsubcategories1) > 0){ ?>
<ul class="third_level_cat myList">
<?php foreach($_subsubcategories1 as $_subsubcategory){ ?>
<li class="hide">
<h2><a href="<?php echo $_subsubcategory->getUrl(); ?>" >
<?php echo $_subsubcategory->getName(); ?>
</a></h2>
<?php $_subcategory2 = Mage::getModel('catalog/category')->load($_subsubcategory->getId()) ?>
<?php $_subsubcategories2 = $_subcategory2->getChildrenCategories() ?>
<?php if (count($_subsubcategories2) > 0){ ?>
<ul class="fourth_level_cat myList">
<?php foreach($_subsubcategories2 as $_subsubcategory2){ ?>
<li class="hide">
<h2><a href="<?php echo $_subsubcategory2->getUrl(); ?>" >
<?php echo $_subsubcategory2->getName(); ?>
</a></h2>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php $limit++; ?>
<?php // if($limit == 3){break;} ?>
<?php } ?>
<li class=""><div class="load-more">Load more</div></li>
</ul>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
<script>
jQuery('.cat-dropdown').navAccordion({
expandButtonText : "+",
collapseButtonText: "-",
selectedExpand: "true",
selectedClass: "selected",
buttonPosition: "right",
headersOnly: false,
headersOnlyCheck: false,
delayLink: false,
delayAmount: null
});
</script>
<script>
jQuery(document).ready(function(){
jQuery(".load-more").click(function(){
jQuery(this).closest('.selected').find('.catlist-toggle').toggleClass('expand');
});
jQuery(".accordion-btn").click(function(){
jQuery(this).closest('.selected').find('.catlist-toggle').addClass('expand');
});
});
</script>
<style>
.selected.item{width: 23%;float: left;margin: 0 10px 55px 10px;}
.catlist-toggle{position: relative; }
.catlist-toggle.expand{height:auto;overflow:initial;}
.catlist-toggle.expand .catlist-toggle-inner ul{height:auto;overflow:initial;}
.catlist-toggle .catlist-toggle-inner{position: relative; width: 100%; top:0; left: 0; background:#fff; z-index:9999;}
.catlist-toggle .catlist-toggle-inner ul{ z-index:9999; height: 220px;overflow:hidden; width:100%;}
.catlist-toggle .load-more{position: absolute; width: 100%; bottom:0; left: 0; background:#ddd; color:#000;}
.cat-custom-img .level-1{ width: 70%;}
.cat-custom-img img{ width: 20%;float: right; margin-top: -71px;}
</style>
答案 0 :(得分：0)
使用以下代码：
<div class="" style="margin:25px 0; width:100%; float:left; clear:both">
<?php
$parentCatId = Mage::registry('current_category')->getId();
$root = Mage::getModel('catalog/category')->load($parentCatId);
$subCat = explode(',',$root->getChildren());
$collection = $root
->getCollection()
->addAttributeToSelect("*")
->addFieldToFilter("entity_id", array("in", $subCat) );
?>
<div class="accord-outer">
<?php foreach($collection as $catname){ ?>
<div class="accord-section">
<div class="accord">
<ul>
<?php $qty = Mage::getModel('catalog/category')->load($catname->getId())->getProductCount();?>
<li class="selected parent">
<a href="<?php echo $catname->getUrl(); ?>"><?php echo $catname->getName(); ?></a>
<?php if($catname['sliderimage']) { ?>
<img src="<?php echo Mage::getBaseUrl('media').'catalog/category/'.$catname['sliderimage']; ?>" alt= "" >
<?php } ?>
</li>
<?php $_category = Mage::getModel('catalog/category')->load($catname->getId()) ?>
<?php $_subcategories = $_category->getChildrenCategories() ?>
<?php if (count($_subcategories) > 0){ ?>
<?php $limit=1; ?>
<?php foreach($_subcategories as $_subcategory){ ?>
<li class="parent">
<a href="<?php echo $_subcategory->getUrl(); ?>">
<?php echo $_subcategory->getName(); ?>
</a>
<?php $_subcategory1 = Mage::getModel('catalog/category')->load($_subcategory->getId()) ?>
<?php $_subsubcategories1 = $_subcategory1->getChildrenCategories() ?>
<?php if (count($_subsubcategories1) > 0){ ?>
<ul class="">
<?php foreach($_subsubcategories1 as $_subsubcategory){ ?>
<li class="">
<a href="<?php echo $_subsubcategory->getUrl(); ?>" >
<?php echo $_subsubcategory->getName(); ?>
</a>
<?php $_subcategory2 = Mage::getModel('catalog/category')->load($_subsubcategory->getId()) ?>
<?php $_subsubcategories2 = $_subcategory2->getChildrenCategories() ?>
<?php if (count($_subsubcategories2) > 0){ ?>
<ul class="">
<?php foreach($_subsubcategories2 as $_subsubcategory2){ ?>
<li class="">
<a href="<?php echo $_subsubcategory2->getUrl(); ?>" >
<?php echo $_subsubcategory2->getName(); ?>
</a>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php $limit++; ?>
<?php } ?>
<?php } ?>
<li class="parent load"><span class="loadmore">Load More</span><span class="loadless">Load Less</span></li>
</ul>
</div>
</div>
<?php } ?>
</div>
</div>
<script>
jQuery('document').ready(function(){
jQuery('.accord').navAccordion({
// Text inside of expand button
expandButtonText : "+",
// Text inside of collapse button
collapseButtonText: "-",
// Expand the selected channel
selectedExpand: "true",
// Class that will be used to detect the currently selected channel
// This will check the "parentElement" for this class (the parent <li> by default)
selectedClass: "selected",
// Apply accordion to all levels
// Setting this to false will apply the accordion only to the first level
multipleLevels: "true",
// Width of accordion expand/collapse button as a percentage or pixels
buttonWidth: "20%",
// Position of button
buttonPosition: "right",
// Speed of slide animation
// "fast", "slow", or number in milliseconds such as 500
slideSpeed: "fast",
// Parent element type, class or ID
// You don't need to change this if you're using a ul > li > ul pattern
parentElement: "li",
// Child element type, class or ID
// You don't need to change this if you're using a ul > li > ul pattern
childElement: "ul",
// Setting to true will make any link with sub-nav behave as if it were set to header only, making the link inaccessible
// This option is useful if you are using the plugin for a non-navigation area
headersOnly: false,
// Setting to true to apply the accordion only to links that are set as "header only" (have no href)
headersOnlyCheck: false,
// Delay following the href of links until after the accordion the has expanded
delayLink: false,
// Time in milliseconds to delay before following href - will use "slideSpeed" by default if nothing else is set
delayAmount: null
});
function accord(ac){
//console.log(ac);
var total = jQuery(ac).find('ul li.parent').length;
//console.log(total);
if(total > 5){
jQuery(ac).find('ul li.parent').each(function(i) {
if(i==1){
jQuery( this ).toggleClass( "visible" );
}
else if(i<=3){
jQuery( this ).toggleClass( "visible" );
}
else if(i == (total-1)){
jQuery( this ).addClass( "button" );
}
else{
jQuery( this ).toggleClass( "hidden" );
}
});
}
else{
jQuery(ac).find('ul li.parent.load').hide();
//alert('afsdfdf');
}
}
jQuery('.accord-outer .accord-section').each(function(){
accord(jQuery(this).children('.accord'));
})
jQuery('.load').click(function(event){
accord(jQuery(this).closest('.accord'));
jQuery(this).find('.loadless').removeClass("accordion-active");
jQuery(this).find('.loadless').toggleClass("active");
jQuery(this).find('.loadmore').toggleClass("active");
});
jQuery(".loadless").click(function(){
jQuery(this).closest('.accord').find('li.parent.active ul').css('display', 'none');
jQuery(this).closest('.accord').find('li.parent.active .accordion-collapsed').css('display', 'inline-block');
jQuery(this).closest('.accord').find('li.parent.active .accordion-expanded').css('display', 'none');
});
});
</script>
<style>
.accord-outer{width:100%; float:left;}
.accord{width:25%; float:left; margin:0 0 20px;}
.visible{display:block;}
.hidden{display:none;}
.loadmore{display:inline-block;}
.loadless{display:none;}
.loadmore.active{display:none;}
.loadless.active{display:inline-block;}
.accord { background: #46CFB0; width: 25%;}
/* First Level */
.accord ul {margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #1ABC9C; }
.accord ul li { border-top: 1px solid #1ABC9C; }
.accord ul li a { color: #FFFFFF; display: block; font-size: 1.1em; line-height: normal; padding: 12px 20px; text-decoration: none; }
.accord ul li a:hover { background: #E95546; text-decoration: none;
/* Second Level */
.accord ul ul { border-bottom: none }
.accord ul ul li { border-top: 1px solid #46CFB0; background: #34BC9D; }
.accord ul ul li a { color: #FFFFFF; display: block; font-size: 1em; line-height: normal; padding: 0.5em 1em 0.5em 2.5em; }
.accord ul ul li a:hover { background: #E95546; }
/* Third Level */
.accord ul ul ul { border-top: 1px solid #46CFB0; }
.accord ul ul ul li { border: none; }
.accord ul ul ul li a { padding-left: 3.5em; padding-top: 0.25em; padding-bottom: 0.25em; }
/* Accordion Button */
ul li.has-subnav .accordion-btn { color: #fff; background: rgba(255,255,255, 0.15); font-size: 16px; }
</style>