英文:
Drop down menu not dropping down HTML
问题
你遇到了一个相当基本的问题。尝试向导興建导興和有一个下拉菜单以显示按价格、类别、评分等进行排序的选项,但下拉菜单不起作用。我一直在尝试查看Stack Overflow上的信息,看是否能找到解决方法,但目前还没有成功。
base.html:
<div class="col-lg col-sm col-md col-6 flex-grow-0">
<div class="category-wrap dropdown d-inline-block float-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i> 所有类别
</button>
<div class="dropdown-menu">
<a href="{% url 'products' %}" class="dropdown-item">所有产品</a>
<a href="{% url 'products' %}?category=price" class="dropdown-item">按价格</a>
<a href="{% url 'products' %}?category=rating" class="dropdown-item">按评分</a>
<a href="{% url 'products' %}?category=wheight" class="dropdown-item">按重量</a>
</div>
</div>
</div>
nav.html:
<div class="col-lg col-sm col-md col-6 flex-grow-0">
<div class="category-wrap dropdown d-inline-block float-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i> 所有类别
</button>
<div class="dropdown-menu">
<a href="{% url 'products' %}" class="dropdown-item">所有产品</a>
<a href="{% url 'products' %}?category=price" class="dropdown-item">按价格</a>
<a href="{% url 'products' %}?category=rating" class="dropdown-item">按评分</a>
<a href="{% url 'products' %}?category=wheight" class="dropdown-item">按重量</a>
</div>
</div>
</div>
我不是专业程序员,但正在努力学习。
英文:
So im having a pretty basic issue, When trying to add a dropdown menu to the navbar to show the options of sorting by price, category, rating etc the dropdown is not working. Ive been trying to read on stack and see if I could find a issue. But no luck yet.
base.html
<div class="col-lg col-sm col-md col-6 flex-grow-0">
<div class="category-wrap dropdown d-inline-block float-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i> All Categories
</button>
<div class="dropdown-menu">
<a href="{% url 'products' %}" class="dropdown-item">All Products</a>
<a href="{% url 'products' %}?category=price" class="dropdown-item">By Price</a>
<a href="{% url 'products' %}?category=rating" class="dropdown-item">By Rating</a>
<a href="{% url 'products' %}?category=wheight" class="dropdown-item">By Wheight</a>
</div>
</div> <!-- category-wrap.// -->
</div>
nav.html
<div class="col-lg col-sm col-md col-6 flex-grow-0">
<div class="category-wrap dropdown d-inline-block float-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i> All Categories
</button>
<div class="dropdown-menu">
<a href="{% url 'products' %}" class="dropdown-item">All Products</a>
<a href="{% url 'products' %}?category=price" class="dropdown-item">By Price</a>
<a href="{% url 'products' %}?category=rating" class="dropdown-item">By Rating</a>
<a href="{% url 'products' %}?category=wheight" class="dropdown-item">By Wheight</a>
</div>
</div>
</div>
Im not a pro coder yet but trying to get there
答案1
得分: 1
由于您正在使用Bootstrap 4,我建议您参考Bootstrap文档中的下拉组件部分:
https://getbootstrap.com/docs/4.0/components/dropdowns/
您可以通过从文档中复制粘贴确切的代码片段,看看它是否在您的代码中起作用,然后从那里继续。如果它仍然不起作用,根据我们所知,您需要通过检查浏览器控制台进行调试。如果出现Bootstrap 4脚本错误,未加载或下拉组件子模块未包含在您的JS分发中,可以考虑这些情况。
英文:
Since you are using bootstrap 4 I would refer to the bootstrap documentation for the dropdown component:
https://getbootstrap.com/docs/4.0/components/dropdowns/
You might double-check functionality by taking the exact snippet from the documentation, see if that works in your code base and continue from there. If it does also not work, based on what we know, you have to debug by checking the browser console. In case the bootstrap 4 script is being on an error or not being loaded or the submodule for dropdowns not being in your distributed JS.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论