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和...）？我可能需要做哪些其他修改？

请记住，在我的网站上，右侧边栏是模块（因此javascript应该适用于模块），现在有两个woocommerce模块正在运行。

我认为我需要更改脚本，以使用fresh-lite主题。因为我没有在家里使用javascript，我希望有人进一步帮助。

到目前为止我所做的是，我已经将它的css部分添加到style.css并尝试将脚本部分添加到functions.php中，但是在完成之后，它将加载空白页面（这些URL）我使用）。所以我想我必须使用像childtheme这样的东西......？

为了更准确，我需要所有小部件（而不是模块）以相同的方式工作.Accordions root应该是小部件的标题，它应该在点击而不是悬停时起作用。

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

WP中模块的折叠/手风琴风格

1 个答案: