Make Magento 1.9 product filter collapsible

问题

I'm trying to make the product filter for a magento shop collapsible. I tried editing the view.phtml in template/category/layer/view.phtml But it's not working.

I Edited these lines: <dt><?php echo $this->__($_filter->getName()) ?></dt>

to <dt><a href="/"><?php echo $this->__($_filter->getName()) ?></a></dt>

and i added some jquery like this:

<script type="text/javascript">
    /* <![CDATA[ */
    jQuery(document).ready(function(){
        jQuery("dl#narrow-by-list> dd:not(:first)").hide();
        jQuery("dl#narrow-by-list> dt a").click(function(){
            jQuery("dl#narrow-by-list> dd:visible").slideUp("fast");
            jQuery(this).parent().next().slideDown("fast");
            return false;
        });
    });
    /* ]]> */
</script>

Current code:

?>
<?php  if($this->canShowBlock()): ?>
<div class="block block-layered-nav">
    <div class="block-title">
        <strong><span><?php  echo $this->__('Shop By')  ?></span></strong>
    </div>
    <div class="block-content">
        <?php  echo $this->getStateHtml()  ?>
        <?php  if ($this->getLayer()->getState()->getFilters()): ?>
            <div class="actions"><a href="<?php  echo $this->getClearUrl()  ?>"><?php  echo $this->__('Clear All')  ?></a></div>
        <?php  endif; ?>
        <?php  if($this->canShowOptions()): ?>
            <p class="block-subtitle"><?php  echo $this->__('Shopping Options')  ?></p>
            <dl id="narrow-by-list">
                <?php  $_filters = $this->getFilters()  ?>
                <?php  foreach ($_filters as $_filter): ?>
                <?php  if($_filter->getItemsCount()): ?>
                    <div class="<?php  if(strcasecmp($_filter->getName(), 'PRICE') == 0) echo 'layered-price'; else echo 'layered-attribute'; ?>">
                        <div class="title-layered"><dt><a href="/"><?php  echo $this->__($_filter->getName())  ?></a></dt></div>
                        <dd><?php  echo $_filter->getHtml()  ?></dd>
                    </div>
                <?php  endif; ?>
                <?php  endforeach; ?>
            </dl>
            <script type="text/javascript">decorateDataList('narrow-by-list')</script>
        <?php  endif; ?>
    </div>
</div>
<?php  endif; ?>
<script type="text/javascript">
    /* <![CDATA[ */
    jQuery(document).ready(function(){
        jQuery("#narrow-by-list> dd:not(:first)").hide();
        jQuery("#narrow-by-list> dt a").click(function(){
            jQuery("#narrow-by-list> dd:visible").slideUp("fast");
            jQuery(this).parent().next().slideDown("fast");
            return false;
        });
    });
    /* ]]> */
</script>

Anyone any idea why this is not working?

回答1:

You made a click event on a link tag

You can trick your javascript with this href attribute:

<dt><a href="javascript:void(0)"> <?php echo $this->__($_filter->getName()) ?></a></dt>

and then your jquery click function will be triggered as usual.

来源：https://stackoverflow.com/questions/33546230/make-magento-1-9-product-filter-collapsible

标签

javascript

php

jquery

magento

magento-1.9