WP의 모듈에 대한 축소/아코디언 스타일

Question

page's 오른쪽 사이드 바를 www.novaator.ee's과 같이 수정하고 싶습니다.

내가 novaator.ee 사이트에서 가져온 코드의 비트 :

/* accordation menu */ 
<script type="text/javascript"> 
function accordMenu(){ 
    jQuery("#rightMenu .rContent").hide(); 
    jQuery("#rightMenu .body-lehed").show(); 

    jQuery('#rightMenu .rHeading').click(function() { 
     jQuery('#rightMenu .rContent').slideUp('normal'); 
     jQuery(this).next().slideDown('normal'); 
    }); 

} 
</script> 

및 CSS

/* Accordation menu */ 
#rightMenu{ 
    margin-bottom:11px; 
    width:214px; 
} 
#rightMenu .link{ 
    font-weight:bold; 
    color:#6b6f72; 
    text-decoration:none; 
    margin-right:10px; 
    margin-left:14px; 
    font-style:italic; 
    font-size:11px; 
    padding-bottom:8px; 
} 

#rightMenu .link:hover{ 
    text-decoration:underline; 
} 
#rightMenu .rHeading,.rHeading2{ 
    background:#14588f; 
    color:#f6f6f6; 
    font-weight:bold; 
    font-size:15px; 
    padding:5px 20px 4px 20px; 
    cursor:pointer; 
    margin-bottom:2px; 
    height:18px; 
} 
#rightMenu .rHeading:hover,.rHeading2:hover{ 
    text-decoration:underline; 
    color:#ffffff; 
} 
#rightMenu .cat-video2010,#rightMenu .cat-video2010 a, 
#rightMenu .cat-video2011,#rightMenu .cat-video2011 a, 
#rightMenu .cat-video,#rightMenu .cat-video a{ 
    background:#ef9d37; 
    color:#f6f6f6; 
    text-decoration:none; 
} 

#rightMenu .rContent{ 
    border:1px solid #dddddd; 
    border-top:0; 
    margin-top:-2px; 
    padding-left:6px; 
    padding-top:11px; 


} 
#rightMenu .question{ 
    border-left: 5px solid #f6b439; 
    padding: 2px 5px 2px 9px; 
    line-height:16px; 
} 
#rightMenu .asnwerer{ 
    font-size:13px; 
    font-weight:bold; 
    color:#c5c5c5; 
    padding-left:14px; 
    margin-top:4px; 
    margin-bottom:-5px; 
} 
#rightMenu .asnwer{ 
    padding-left:14px; 
    line-height:16px; 
} 

내 질문이있다 내가 코드 (있는 style.css에이 조각을 추가 할 위치 및 ~ ...)? 어떤 다른 수정을해야합니까?

내 사이트에서 오른쪽 사이드 바는 모듈 용이므로 (자바 스크립트가 모듈에서 작동해야 함) 현재 두 개의 woocommerce 모듈이 실행 중임을 명심하십시오.

---

나는 내가 신선한 라이트 theme.Since 임없이 자바 스크립트와 함께 집에서, 내가 누군가의 추가 지원을 기대했다과 기능, 조금 너무 스크립트를 변경할 필요가 있다고 생각합니다.

내가 지금까지 해본 것은 style.css에 CSS 부분을 추가하고 functions.php에 스크립트 부분을 추가하려고했지만 빈 페이지를로드합니다. URL을 사용하고 있습니다.) 그래서 나는 childtheme과 같은 것을 사용해야한다고 생각합니다 ...?

정확하게 말하면 모듈 (위젯)이 아닌 위젯이 동일한 방식으로 작동해야합니다. 코드 루트는 위젯의 제목이어야하며 마우스를 올리면 클릭하면 작동합니다.

Answer 1

그렇듯이 해당 스크립트를 적용 할 HTML 뒤에 스크립트를 포함시켜야합니다. 따라서 페이지에서 바닥 글 템플릿이나 다른 위치를 찾아보십시오.

약간 수정 한 경우 템플릿의 어느 위치 에나 넣을 수 있습니다.

<script type="text/javascript"> 
jQuery(function() { // wait for the DOM to finish loading 
    function accordMenu(){ 
     jQuery("#rightMenu .rContent").hide(); 
     jQuery("#rightMenu .body-lehed").show(); 

     jQuery('#rightMenu .rHeading').click(function() { 
      jQuery('#rightMenu .rContent').slideUp('normal'); 
      jQuery(this).next().slideDown('normal'); 
     }); 
    } 
}); 
</script> 

이 모든 것은 CSS에있는 ID 및 클래스 값이 HTML에도 있다고 가정합니다.