plotly-dash - 如何使用 dash_html_components.Script 命令

Question

我想将下面的代码转换为虚线图代码。我可以知道如何将 HTML 代码中的第二个脚本标记转换为破折号吗？

.summary:hover+.detail,
.detail:hover {
  display: block;
}

.show.detail {
  display: block;
}

.detail {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample1</a>
  <div class="detail">Detail of this summary</div>
</div>
<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample2</a>
  <div class="detail">Detail of this summary</div>
</div>

<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample3</a>
  <div class="detail">Detail of this summary</div>
</div>

<script>
  $(".summary").on("click", function() {
    $(this).next().toggleClass("show");
  })
</script>

Answer 1

您可以在 plotly 中构建相同的 html 结构。
以下代码是一个工作示例。

要求:您的 CSS 代码必须存储在 static/stylesheet.css

例子:

import dash
import dash_core_components as dcc
import dash_html_components as html

from flask import send_from_directory
import os

app = dash.Dash(__name__)
server = app.server

# Configure Samples
sample1 = html.Div([
                dcc.Link('Sample1', href='javascript:void(0);', className='summary'),
                html.Div('Details of this summary', className='detail')
], className='wrapper')

sample2 = html.Div([
                dcc.Link('Sample2', href='javascript:void(0);', className='summary'),
                html.Div('Details of this summary', className='detail')
], className='wrapper')

sample3 = html.Div([
                dcc.Link('Sample3', href='javascript:void(0);', className='summary'),
                html.Div('Details of this summary', className='detail')
], className='wrapper')
# Define layout
app.layout = html.Div([
    sample1,
    sample2,
    sample3
])

app.scripts.append_script({"external_url": [
        "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
]})

# Add css file (locally hosted)
app.css.append_css({"external_url": [
    "static/stylesheet.css"
]})

# Serving local static files
@app.server.route('/static/<path:path>')
def static_file(path):
    static_folder = os.path.join(os.getcwd(), 'static')
    return send_from_directory(static_folder, path)

if __name__ == '__main__':
    app.run_server(debug=True)