2013-10-09 4 views
0

Я пытаюсь добавить стрелку, которая изменяется в моем меню аккордеона. Я считаю, мне нужна функция removeClass из JQuery.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

Для начала, код не будет выполняться после того, как 'вернуться ложным;', поэтому удалить первый из них. – 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; 
     }); 
    }); 

EDIT Проверить это FIDDLE

+0

Это делает все раскрывающееся меню и все не имеют выбранного изображения. – Newcastlefan

+0

проверить скрипку. Обратите внимание на изменения в css! –

+0

Yo также должен добавить класс 'selected' к первому элементу по умолчанию –