Цикл Flask не повторяется должным образом в раскрывающемся меню Bootstrap - PullRequest
Новая
       16

Цикл Flask не повторяется должным образом в раскрывающемся меню Bootstrap

2 голосов
/ 30 апреля 2019

Я пытаюсь создать ряд раскрывающихся кнопок, в которых раскрывающиеся кнопки заполняются клавишами словаря, а выпадающие элементы заполняются из списков, связанных с каждой клавишей.

Цель - отправить словарь в шаблон HTML и создать все кнопки на основе содержимого словаря.Затем выпадающие списки будут перенаправлены в любое выбранное место.

Цикл в приведенном ниже HTML-коде будет работать при первом запуске, но после этого все выпадающие элементы будут установлены в последний список в словаре.

Код Python; 

from flask import Flask, render_template
app = Flask(__name__)
names = {'Star Wars': ['Luke', 'Han', 'Chewie'], 'Avengers': ['Iron Man', 'Hulk', 'Spiderman']}

@app.route('/', methods=['GET', 'POST'])
def index():

    return render_template('indexdrop.html', names=names)

app.run(debug = True)

HTML;

.... заголовок опущен ... 

<div class = "jumbotron">
<div class="btn-group">
    {% for idx in names.keys() %}
    <button type="button" class="btn btn-danger"> {{ idx }}</button>
    <button type="button" class="btn btn-danger dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">{{ idx }}</span>
    </button>
    <div class="dropdown-menu">
        {% for item in names[idx] %}
        <a class="dropdown-item" href="#">{{ item }}</a>
        {% endfor %}
    </div>
    {% endfor %}
    </div>
</div>

Любая помощь очень ценится!

Снимок экрана неправильного раскрывающегося списка: enter image description here

Ответы [ 2 ]

1 голос
/ 30 апреля 2019

Div <div class="btn-group"> должен быть частью вашего цикла for.В настоящее время у вас есть один btn-group, в котором есть два элемента dropdown-menu.

Переключатель во втором раскрывающемся меню ищет элемент dropdown-menu в родительском элементе btn-group (который, div с персонажами Звездных войн). 

{% for idx in names.keys() %}
    <div class="btn-group">
        ...
        ...
    </div>
{% endfor %}
0 голосов
/ 30 апреля 2019 
<div class="jumbotron">
    {% for idx in names.keys() %}
    <div class="btn-group">

        <button type="button" class="btn btn-danger"> {{ idx }}</button>
        <button type="button" class="btn btn-danger dropdown-toggle " data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <span class="sr-only">{{ idx }}</span>
        </button>
        <div class="dropdown-menu">
            {% for item in names[idx] %}
            <a class="dropdown-item" href="#">{{ item }}</a>
            {% endfor %}
        </div>

    </div>
    {% endfor %}
</div>

Пожалуйста, используйте <div class="btn-group"> каждые dropdown group.

С https://v4 -alpha.getbootstrap.com / components / dropdowns / ,
Я могу найти aria-labelledby="dropdownMenuButton", также пытался, но результат тот же.

Итак, я добавил <div class="btn-group"> к каждому dropdown group

Эта проблема относительная bootstrap, а не python, flask.

...