Я пытаюсь добавить стрелку, которая изменяется в моем меню аккордеона. Я считаю, мне нужна функция 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, как вы, наверное, можете сказать!
благодаря
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
return false;
, поэтому удалите первый из них.