1. 홈
  2. 질의 응답
  3. jQuery를 아코디언 된 구현에

jQuery를 아코디언 된 구현에

2012-08-23 2 views
0

나는 HTML 설정을 이해 http://jsfiddle.net/8MXAu/jQuery를 아코디언 된 구현에

가, 내가 어려움을 인식하지 못했습니다 것이 만들어 내 웹 사이트에 자바 스크립트와 SCS들을 적용하는 방법이다 나는 현재 내 사이트에이 특정 아코디언을 구현하기 위해 노력하고있어 이 일. 아래는 내 웹 사이트 CSS 레이아웃입니다. 당신이 설치하는 법을 가르쳐 줄 수 있다면 어디에서 자바 스크립트와 scss를 적용하면 도움이 될까요?

/* 
--------------------------------------- 
APOLLO 
--------------------------------------- 
by Ryan Clark 
www.ryanvsclark.com 
---------------------------------------                           
*/ 


/* ---------- GLOBAL STYLING RULES & RESETS ---------- */ 
* { 
    margin: 0px; 
    padding: 0px; 
} 

<virb get="customize.fonts.font_face" /> 

body { 
    background: <virb get="customize.colors.background_footer" />; 
    font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />; 
    color:<virb get="customize.colors.text" />; 
    line-height: 1.5; 
    font-family: <virb get="customize.fonts.body_family" />,serif; 
} 

hr { display: none; } 

#page hr { 
    display: block; 
    border: none 0; 
    border-top: 1px solid <virb get="customize.colors.line_page" />; 
    width: 100%; 
    height: 1px; 
    margin: 0 0 20px 0; 
} 

input, option, textarea, 
button { 
    font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />; 
} 

ul, ol { 
    list-style-type: none; 
} 

q:before, q:after { content: ""; } 

big { font-size: 12px; } 
small { font-size: 9px; } 

img { border: none; } 

a { 
    color: <virb get="customize.colors.link" />; 
    text-decoration: none; 
    outline: none; 
} 

a:hover { 
    color: <virb get="customize.colors.link_hover" />; 
} 

#footer a { 
    color: <virb get="customize.colors.footer_link" />; 
    text-decoration: none; 
    outline: none; 
} 

#footer a:hover { 
    color: <virb get="customize.colors.footer_link_hover" />; 
} 

p, h1, h2, h3, h4, h5, h6, 
ol, ul { 
    line-height: 1.5; 
} 
#container_right p { 
    line-height: 150%; 
} 
#page #description h2, #page #blog .text h3 { 
    font-size: 1.5em; 
    font-family: <virb get="customize.fonts.body_family" />; 
} 

.homepage #page #description h2 { 
    margin: 10px 0 0 0; 
    font-size: 1.5em; 
} 

.homepage #page #description h3 { 
    font-size: 1.2em; 
    font-family: <virb get="customize.fonts.body_family" />; 
    color:#888; 
} 

#header_wrapper, #page_wrapper, #footer_wrapper { 
    width:100%; 
    position:relative; 
} 



/* ---------- HEADER ---------- */ 

div#header_wrapper { 
    width:100%; 
    background: <virb get="customize.colors.background_header" />; 
    z-index: 2; 
} 

div#header { 
    width:960px; 
    margin:0 auto; 
    padding:35px 0 25px; 
} 
    #header h1 { 
     font: normal <virb get="customize.fonts.site_size" /><virb get="customize.fonts.site_family" />; 
     line-height: 100%; 
    } 

     #header h1 a, 
     #header h1 a:hover { 
      color: <virb get="customize.colors.site_name" />; 
     } 

     #header h1 img { 
      display: block; 
      max-width: 300px; 
     } 

    #header h2 { 
     font-weight: bold; 
     font-size: <virb get="customize.fonts.tagline_size" />; 
     font-family: <virb get="customize.fonts.header_family" />; 
     color: <virb get="customize.colors.tagline" />; 
     line-height: 110%; 
     padding-top: 6px; 
    } 

    #header #page_title { 
     float:left; 
    } 
    #header #site_nav { 
     float:right; 
     margin-top: 22px; 
    } 

#display_name {width: 300px;} 

    #display_name h2 {color:<virb get="customize.colors.tagline" />; text-transform: uppercase;} 


/* ---------- NAVIGATION ---------- */ 

div#site_nav { 
    display: block; 
    max-width: 650px; 
} 

#site_nav ul li { 
    display: inline; 
    position: relative; 
    font-size: <virb get="customize.fonts.nav_size" />; 
    font-family: <virb get="customize.fonts.header_family" />; 
    font-weight: bold; 
    letter-spacing: .2px; 
} 

#site_nav div.clear { 
    display: none; 
} 

    #site_nav li.section:after { content: " "; } 

    #site_nav li.section ul { display: none; } 
    #site_nav li.section:hover ul { display: block; } 
    #site_nav li.section ul { 
     position: absolute; 
     top: <virb get="customize.fonts.nav_size" />; 
     left: 10px; 
     width: 200px; 
     z-index: 111; 
     padding-top: 10px; 
    } 
     #site_nav li.section ul li { 
      float: none; 
      display: block; 
      font: normal <virb get="customize.fonts.nav_size" />; 
      background: <virb get="customize.colors.nav_dropdown" />; 
      margin: 0; 
      padding: 7px 7px 5px 7px; 
      letter-spacing: 0; 
      text-align: left; 
      line-height: 1.5; 
      border-bottom: 1px solid <virb get="customize.colors.background_header" />; 
     } 
      #site_nav li.section ul li:last-child {border-bottom: none;} 

      #site_nav li.section ul li a { 
       text-transform: none; 
       letter-spacing: 0; 
       padding: 4px 7px 4px 3px; 
       font: <virb get="customize.fonts.header_family" />; 
       display: block; 
      } 

    #site_nav ul li a, 
    #site_nav ul li.section { 
     cursor: pointer; 
     padding: 0 12px; 
     font: <virb get="customize.fonts.header_family" />; 
     color: <virb get="customize.colors.nav_link" />; 
    } 
    #site_nav ul li a:hover, 
    #site_nav ul li.section:hover { 
     color: <virb get="customize.colors.nav_hover" />; 
    } 
    #site_nav ul li.active, #site_nav ul li.active a { 
     color: <virb get="customize.colors.nav_hover" />; 
    } 

    #site_nav ul li.active ul li a { 
     color: <virb get="customize.colors.nav_link" />; 
    } 

    #site_nav ul li.active ul li a:hover { 
     color: <virb get="customize.colors.nav_hover" />; 
    } 

    #site_nav ul li.active ul li.active a { 
     color: <virb get="customize.colors.nav_hover" />; 
     cursor: default; 
    } 


/* ---------- PAGE ---------- */ 

div#page_wrapper { 
    background: <virb get="customize.colors.background_page" />; 
    z-index: 1; 
    overflow: hidden; 
} 

div#page { 
    width:960px; 
    margin:0 auto; 
    padding:25px 0 15px; 
    overflow: hidden; 
    border-top: 1px solid <virb get="customize.colors.line_page" />; 
    border-bottom: 1px solid <virb get="customize.colors.line_page" />; 
} 

body.index div#page {padding-bottom: 0;} 

#page div#description { 
    position: relative; 
    padding: 0; 
    width:600px; 
} 
    #page #description p, #page #description h2, #page #description h3, #page #description h4, #page #description h5, #page #description h6 { 
     padding: 0 0 15px 0; 
    } 

    #page #description ul li, #page #description ol li {padding: 0 0 5px 0;} 

    #page #description h2 {line-height: 1.3;} 

div#share { 
    display: block; 
    position: relative; 
    clear: both; 
    padding: 10px 0 0 0; 
} 

#page #title { 
    display: none; 
} 


/* ---------- SIDEBAR ---------- */ 

div#widgets { 
    font-size: 11px; 
    overflow: hidden; 
    line-height: 0; 
    font-family: <virb get="customize.fonts.footer_family" />; 
} 

div#widgets:after { 
    display: block; 
    visibility: hidden; 
    clear: both; 
    content: "\00A0"; 
} 

    #widgets .module { 
     display: block; 
     float: left; 
     width: 300px; 
     padding: 0 0 20px 0; 
     margin: 0 30px 0 0; 
    } 
    #widgets .last_module {margin: 0;} 

     #widgets .module h4 { 
      font: italic <virb get="customize.fonts.body_size"/> <virb get="customize.fonts.footer_family" />; 
      color: <virb get="customize.colors.widget_text" />; 
      letter-spacing: .2px; 
      padding: 0 0 10px 0; 
      margin-bottom:10px; 
      border-bottom: 1px solid <virb get="customize.colors.line_footer" />; 
     } 
      #widgets h4 a { color: <virb get="customize.colors.footer_link" />; } 
      #widgets h4 a:hover { color: <virb get="customize.colors.footer_link_hover" />; } 

     #widgets .module p { 
      font-size: <virb get="customize.fonts.body_size" />; 
      line-height: 150%; 
      padding: 0; 
     } 

      #widgets .module.twitter ul li span a, 
      #widgets .module.lastfm ul.recent_plays li span { 
       color: <virb get="customize.colors.footer_link" />; 
      } 
      #widgets .module.twitter ul li span a:hover { 
       color: <virb get="customize.colors.text" />; 
      } 

     #widgets .module.lastfm ol { 
      list-style-type: decimal; 
      list-style-position: inside; 
     } 

      #widgets .module.rss-feed ul, 
      #widgets .module.blog-posts ul, 
      #widgets .module.twitter ul, 
      #widgets .module.lastfm ul.upcoming_events, 
      #widgets .module.lastfm ul.recent_plays { 
       margin-bottom: -10px; 
      } 

      #widgets .module.rss-feed ul li, 
      #widgets .module.blog-posts ul li, 
      #widgets .module.twitter ul li, 
      #widgets .module.lastfm ul.upcoming_events li, 
      #widgets .module.lastfm ul.recent_plays li { 
       padding-bottom: 10px; 
      } 

       #widgets .module.lastfm ol li img { display: none; } 

     #widgets .count_2, #widgets .count_5, #widgets .count_8, #widgets .count_11, #widgets .count_14, #widgets .count_17 { 
      margin: 0; 
     } 


    /* AUDIO PLAYER */ 

    .module.audio_player ul { 
     display: block; 
     width: 278px; 
     background: #fff; 
     border: solid 1px #ddd; 
     border-radius: 5px; 
     padding: 10px 10px 15px 10px; 
     overflow: hidden; 
    } 
    .module.audio_player li .album_image { 
     height: 75px; 
     width: 75px; 
     padding: 5px 15px 5px 5px; 
     margin-bottom: 10px; 
     display: block; 
     float:left; 
    } 
    .module.audio_player li .album_image img { 
     height:75px; 
     width:75px; 
    } 

    .module.audio_player li { 
     display: none; 
    } 
    .module.audio_player li.selected { 
     display: block; 
    } 
    #widgets .module.audio_player li h3 { 
     text-align: left; 
     font-size: <virb get="customize.fonts.body_size" />; 
     padding-bottom: 2px; 
    } 
     #widgets .module.audio_player li h3 .download { 
      display: none; 
     } 
    #widgets .module.audio_player ul h4 { 
     display: block; 
     text-align: left; 
     font: normal 12px <virb get="customize.fonts.footer_family" />; 
     text-transform: none; 
     border: none; 
     letter-spacing: 0; 
     padding: 0 0 2px 0; 
     margin: 0; 
     color: <virb get="customize.colors.text" />; 
    } 
    .module.audio_player .controls { 
     display: block; 
     float: left; 
     margin:5px 0 10px 0; 
     text-align: left; 
     padding-bottom: 10px; 
     width: 180px; 
     border-bottom: 1px solid <virb get="customize.colors.line_page" />; 
    } 
     .module.audio_player .controls .prev, 
     .module.audio_player .controls .next { 
      display: inline-block; 
      width: 20px; 
      height: 30px; 
     } 
     .module.audio_player .controls .prev a, 
     .module.audio_player .controls .next a { 
      display: inline-block; 
      width: 20px; 
      height: 30px; 
      overflow: hidden; 
      text-indent: 1000px; 
      -moz-border-radius: 7px; 
      -webkit-border-radius: 7px; 
      border-radius: 7px; 
     } 
     .module.audio_player .controls .prev a { 
      background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat left -7px; 
     } 
     .module.audio_player .controls .next a { 
      background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat right -7px; 
     } 

     .module.audio_player .controls .playpause { 
      display: inline-block; 
      height: 30px; 
      width: 35px; 
      overflow: hidden; 
     } 
      .module.audio_player .controls .playpause a { 
       display: block; 
       height: 30px; 
       width: 35px; 
       overflow: hidden; 
       text-indent: 1000px; 
       background: <virb get="customize.colors.text" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -7px; 
       -moz-border-radius: 7px; 
       -webkit-border-radius: 7px; 
       border-radius: 7px; 
      } 
      .module.audio_player .playing .controls .playpause a { 
       background: <virb get="customize.colors.link" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -52px; 
      } 

    .module.audio_player audio { 
     width: 150px; 
     padding: 15px 5px 0px 5px; 
    } 

    .module.audio_player .length { 
     display: block; 
     height: 6px; 
     width: 150px; 
     border: solid 1px #ddd; 
     background: #ddd; 
     -moz-border-radius: 2px; 
     -webkit-border-radius: 2px; 
     border-radius: 2px; 
     position: relative; 
     margin-top: 9px; 
     float:left; 
     margin-left:95px; 
    } 
     .module.audio_player .length .load { 
      height: 6px; 
      width: 0%; 
      display: block; 
      background: <virb get="customize.colors.text" />; 
      position: absolute; 
     } 
     .module.audio_player .length .progress { 
      height: 6px; 
      width: 0%; 
      display: block; 
      background: <virb get="customize.colors.link" />; 
      position: absolute; 
     } 
     .module.audio_player .length .time { 
      color: <virb get="customize.colors.text" />; 
      font-size: <virb get="customize.fonts.body_size" />; 
      position: absolute; 
      left: 157px; 
      top: -4px; 
     } 



/***** @group Cart widget *****/ 

.cart-widget { 
    width: 75px; 
    text-align: center; 
    position: fixed; 
    top: 100px; 
    right: 0; 
    z-index: 2000; 
} 

    .cart-widget .cart { 
    background: <virb get="customize.colors.line_page" />; 
    font-family: <virb get="customize.fonts.body_family" />; 
    font-size: <virb get="customize.fonts.body_size" />; 
    color: <virb get="customize.colors.text" />; 
    padding: 10px; 
    } 
    .cart-widget .cart span { 
     display: block; 
    } 
    .cart-widget .cart span.label { 
     font-size: .65em; 
     text-transform: uppercase; 
    } 
    .cart-widget .cart span.cart-total { 
     font-weight: bold; 
    } 

    .cart-widget .checkout { 
    background: <virb get="customize.colors.link_hover" />; 
    padding: 5px 10px; 
    text-transform: uppercase; 
    color: <virb get="customize.colors.background_page" />; 
    font-size: 9px; 
    display: block; 
    margin-top: 1px; 
    -webkit-transition: all .2s linear; 
     -moz-transition: all .2s linear; 
     -o-transition: all .2s linear; 
      transition: all .2s linear; 
    } 
    .cart-widget .checkout:hover { 
     background: <virb get="customize.colors.link" />; 
    } 

/***** @group Cart widget *****/ 



/* ---------- FOOTER ---------- */ 

div#footer { 
    width:960px; 
    margin:0 auto; 
    padding:25px 0; 
    font-family: <virb get="customize.fonts.footer_family" />; 
    color: <virb get="customize.colors.widget_text" />; 
}  

span#virb_customize_footer { 
    color: <virb get="customize.colors.footer_text" />; 
    padding-top: 10px; 
    width:100%; 
    display: block; 
} 


/* ie7 specific styles */ 

.ie7 .audio_player .controls .playpause a, 
.ie7 .audio_player .controls .prev a, 
.ie7 .audio_player .controls .next a { 
    font-size:0; 
    display: block; 
    line-height: 0; 
}

출처

2012-08-23 user1621058

+0

[jQuery의 사이트에있는 예제] (http://jqueryui.com/demos/accordion/)를 보셨습니까? – adamdport

+0

나는 내 사이트에 이것을 구현하는 방법을 아직 완전히 이해하지 못하고있다. jquery 코드를 어디에 두어야하는지 혼란 스럽습니다. 내 사이트의 HTML 섹션에 이것을 추가합니까? scss 코드에 관해서, 나는 이것을 내 사이트의 내 CSS 섹션에 어디에 추가할까요? 그리고 scss가 CSS 섹션에서 올바르게 구현됩니까? – user1621058

답변

0

사이트의 html 코드에 JS 코드와 CSS 코드를 입력해야합니다.

<head> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
    <style type='text/css'> 
    .accordion{margin:50px}.accordion dd,.accordion dt{padding:10px;border:1px solid #000;border-bottom:0}.accordion dd:last-of-type,.accordion dt:last-of-type{border-bottom:1px solid #000}.accordion dd a,.accordion dt a{display:block;color:#000;font-weight:bold}.accordion dd{border-top:0;font-size:12px}.accordion dd:last-of-type{border-top:1px solid #fff;position:relative;top:-1px}a{text-decoration:none}body{font:16px Sans-Serif} 
    </style> 

<script type='text/javascript'>//<![CDATA[ 
    $(function(){ 
     (function($) { 

     var allPanels = $('.accordion > dd').hide(); 

     $('.accordion > dt > a').click(function() { 
       allPanels.slideUp(); 

     if($(this).parent().next().is(':hidden')) 
     { 
       $(this).parent().next().slideDown(); 
     } 

     return false; 
     }); 

    })(jQuery); 
    });//]]> 

</script> 
</head>

CSS 부분은 HTML 코드 또는 CSS에 넣을 수 있습니다.

출처

2012-08-23 23:19:44 user1512616

+0

정말 고마워요! 나는 이것을 알아 내려고 노력했다. 완벽하게 작동합니다! :디 – user1621058

관련 문제

 관련 문제