JQuery удалитьClass + addClass?

0

Я пытаюсь добавить стрелку, которая изменяется в моем меню аккордеона. Я считаю, мне нужна функция removeClass из JQuery.

Я так далеко добрался:

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');
}

Все это работает с меню аккордеона и добавляет изображение рядом с заголовками верхнего уровня. Однако я не уверен, как или почему выбор не появляется в HTML или меняет изображение для меня? У кого-нибудь есть идеи, в которых я ошибаюсь. Я не совсем понимаю JQuery, как вы, наверное, можете сказать!

благодаря

  • 4
    Для начала, никакой код не будет выполнен после return false; , поэтому удалите первый из них.
  • 0
    Если я удалю первый, верните false; это превращает мое меню верхнего уровня в ссылки?
Показать ещё 2 комментария
Теги:
jquery-ui-accordion

1 ответ

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
    Это заставляет все меню расширяться, и у всех есть не выбранное изображение.
  • 0
    проверь скрипку Пожалуйста, обратите внимание на изменения в CSS!
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню