2013-10-09 3 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는 최상위 타이틀 옆에 있습니다. 그러나 나는 select가 HTML에 나타나지 않거나 왜 이미지가 나에게 변경되지 않는지 확신 할 수 없다. 누구든지 제가 잘못 가고있는 아이디어가 있습니까? 나는 당신이 아마 말할 수있는 것처럼 Jquery를 완전히 이해하지 못한다! `그래서 그들 중 첫 번째를 제거,

감사

+4

, 아니 코드는 false를 돌려'후 실행되지 않습니다. – Archer

+0

첫 번째 false를 제거하면 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

Yo도 기본적으로 첫 번째 요소에 'selected'클래스를 추가해야합니다. –