2013-10-09 156 views
0

我試圖添加一個箭頭來改變我的手風琴菜單。我相信我需要Jquery的removeClass函數。Jquery removeClass + addClass?

我走了這麼遠的那一刻:

HTML/PHP:

<dl id="narrow-by-list"> 
      <?php $_filters = $this->getFilters() ?> 
      <?php foreach ($_filters as $_filter): ?> 
      <?php if($_filter->getItemsCount()): ?> 
       <dt class=""><a href="/"><?php echo $this->__($_filter->getName()) ?></a></dt> 
       <dd><?php echo $_filter->getHtml() ?></dd> 
      <?php endif; ?> 
      <?php endforeach; ?> 
</dl> 

的Jquery:

<script type="text/javascript"> 
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; 

     jQuery('.selected').removeClass('selected'); 
     thisObj.addClass('selected'); 
     var content = thisObj.parent().next(); 
     content.slideDown('fast'); 

     return false; 
    }); 
}); 
</script> 

CSS:

#narrow-by-list > dt a { 
    padding-left: 20px; 
    background-image: url('/images/bullet.png'); 
    background-repeat:no-repeat; 
    background-position: left center; 
} 
#narrow-by-list > dt a.selected{ 
    background-image: url('/images/bulletselected.png'); 
} 

這一切工作用手風琴菜單和添加的圖像e在頂級標題旁邊。然而,我不確定如何或爲什麼選擇不出現在HTML或更改圖像爲我?有沒有人有任何想法,我錯了。我完全不瞭解Jquery,因爲你可能會說出來!

感謝

+4

一開始,沒有代碼會後'返回false執行;',所以刪除其中的第一個。 – Archer

+0

如果我刪除第一個返回false;它使我的頂級菜單進入鏈接? – Newcastlefan

+0

你可以發佈呈現的頁面,而不是php? – Archer

回答

1
jQuery(document).ready(function(){ 
     jQuery("dl#narrow-by-list> dt").first().addClass('selected'); 
     jQuery("dl#narrow-by-list> dd:not(:first)").hide(); 
     jQuery("dl#narrow-by-list> dd:not(:first)").hide(); 
     jQuery("dl#narrow-by-list> dt a").click(function(event){ 
      if(jQuery(this).parent().hasClass('selected')) 
      { 
       return false; 
      } 
      event.preventDefault(); 
      jQuery('.selected').removeClass('selected'); 
      jQuery(this).parent().addClass('selected'); 
      jQuery("dl#narrow-by-list> dd:visible").slideUp("fast"); 
      jQuery(this).parent().next().slideDown("fast");      
      return false; 
     }); 
    }); 

編輯 入住這FIDDLE

+0

這使得所有菜單的展開,並且都有沒有選定的圖像。 – Newcastlefan

+0

檢查小提琴。請注意css的變化! –

+0

喲也應該添加'selected'類到默認的第一個元素 –