jQuery手风琴实现

Question

我目前正在尝试将此特定手风琴应用到我的网站http://jsfiddle.net/8MXAu/

我理解HTML设置，我很难理解的是如何将javascript和scss应用到我的网站来完成这项工作。下面是我的网站css布局。如果你可以指导我如何设置以及在哪里应用javascript和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;
}

Answer 1

您需要将JS和CSS代码放入您网站的html代码中。

<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中。