css - 使用 CSS 的狮身人面像和 Accordion 列表

Question

我尝试在 Sphinx 模板中实现函数标题的 Accordion 列表。现在每个功能都在一页上描述，无法隐藏其中的一些功能。我认为这将是一个非常方便的功能。

我正在使用模板“bootstrap”(但我认为这无关紧要)。我覆盖文件“layout.html”。在此文件中，我可以覆盖标准 block (此处描述:http://sphinx-doc.org/templating.html#blocks)。我的功能的每个描述(来自 .py 文件的文档)都位于部分中。但我不明白如何将自己的 .css 样式应用于这些部分。请帮助我..

或者也许使用 JavaScript 可以更轻松地完成？

我想做这样的事情http://tympanus.net/codrops/2012/02/21/accordion-with-css3/

Answer 1

我找到了使用 JQuery 和 CSS 的方式。

我们需要添加一个 CSS 文件并扩展 layout.html。我重写 block “extrahead”

首先，您需要将layout.html 放入“_templates”目录，将accordion.css 放入“_static”。在这里阅读更多 http://ryan-roemer.github.io/sphinx-bootstrap-theme/README.html#extending-layout-html

Accordion .css:

h3{
    cursor: pointer;
    padding: 10px 10px;
}
h1{
    text-align: center;
}
dl.function{
    display: none;
} 

layout.html:

{# Import the theme's layout. #}
{% extends "!layout.html" %}

{# Custom CSS overrides #}
{% set css_files = css_files + ["_static/accordion.css"] %}

{% block extrahead %}

<script type="text/javascript">
        $(document).ready(function(){   
            $('h3').click(function(){   
                $(this).toggleClass('active');      
                $(this).next('dl').slideToggle(1);  
            });
        });
        $(document).ready(function(){   
            $('dl.post').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'#10A54A', 'color':'white', 'font-weight':'normal'});
            });
        });
        $(document).ready(function(){   
            $('dl.put').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'#C5862B', 'color':'white', 'font-weight':'normal'});
            });
        });
        $(document).ready(function(){   
            $('dl.delete').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'#A41E22', 'color':'white', 'font-weight':'normal'});
            });
        });
        $(document).ready(function(){   
            $('dl.get').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'#0F6AB4', 'color':'white', 'font-weight':'normal'});
            });
        });
        $(document).ready(function(){   
            $('dl.any').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'gray', 'color':'white', 'font-weight':'normal'});
            });
        });

        $(document).ready(function(){   
            $('h2').css('font-weight', '600');
        });
</script>

{{ super() }}
{% endblock %}

一个例子:

http://i.stack.imgur.com/Ayj1S.png