Can't get django-mptt tree dropdown to work properly with bootstrap. How can I do that?

Question

Django

It is necessary to make a drop-down menu with several levels, but it doesn’t work for me, not only does the list have to drop out to the right, but it drops out to the left, the drop-out also works only at level 1, after the second it doesn’t.
When outputting with normal recursion, everything works correctly, this is how the list should look like:


But when I try to make it drop-down, then if I click on travel, the list drops out, and if I click on Europe, it doesn't. And the problem is that I don't understand how it can be done.


This is what the code looks like in the template:

{% load mptt_tags %}
<ul class="nav">
    {% recursetree rubrics %}
        <li class="nav-item dropright">
             <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{node.name}}</a>
            {% if not node.is_leaf_node %}
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">{{children}}</a></li>
            </ul>
            {% endif %}
        </li>
    {% endrecursetree %}
</ul>

Like this in the model:

class Rubric(MPTTModel):
    name = models.CharField(max_length=50, unique=True)
    parent = TreeForeignKey('self', on_delete=models.CASCADE, null=True, blank=True, related_name='children')

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse('rubric', kwargs={'pk': self.pk})

    class MPTTMeta:
        order_insertion_by = ['name']

And like this in view:

def test(request):
    return render(request, 'testapp/test.html' , {'rubrics': Rubric.objects.all()})

But with model and view, everything is fine. Need help with a template

Answer 1

To begin with, on pure html, make an imitation of generating a list. So it will be easier to test where what is pressed. When you solve all the problems, then integrate into the menu generation script