下拉菜单未展开 HTML

huangapple go评论68阅读模式
英文:

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

 &lt;div class=&quot;col-lg col-sm col-md col-6 flex-grow-0&quot;&gt;
    &lt;div class=&quot;category-wrap dropdown d-inline-block float-right&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
            &lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt; All Categories
        &lt;/button&gt;
        &lt;div class=&quot;dropdown-menu&quot;&gt;
            &lt;a href=&quot;{% url &#39;products&#39; %}&quot; class=&quot;dropdown-item&quot;&gt;All Products&lt;/a&gt;
            &lt;a href=&quot;{% url &#39;products&#39; %}?category=price&quot; class=&quot;dropdown-item&quot;&gt;By Price&lt;/a&gt;
            &lt;a href=&quot;{% url &#39;products&#39; %}?category=rating&quot; class=&quot;dropdown-item&quot;&gt;By Rating&lt;/a&gt;
            &lt;a href=&quot;{% url &#39;products&#39; %}?category=wheight&quot; class=&quot;dropdown-item&quot;&gt;By Wheight&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt; &lt;!-- category-wrap.// --&gt;
&lt;/div&gt; 

nav.html

 &lt;div class=&quot;col-lg col-sm col-md col-6 flex-grow-0&quot;&gt;
    &lt;div class=&quot;category-wrap dropdown d-inline-block float-right&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
            &lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt; All Categories
        &lt;/button&gt;
        &lt;div class=&quot;dropdown-menu&quot;&gt;
            &lt;a href=&quot;{% url &#39;products&#39; %}&quot; class=&quot;dropdown-item&quot;&gt;All Products&lt;/a&gt;
            &lt;a href=&quot;{% url &#39;products&#39; %}?category=price&quot; class=&quot;dropdown-item&quot;&gt;By Price&lt;/a&gt;
            &lt;a href=&quot;{% url &#39;products&#39; %}?category=rating&quot; class=&quot;dropdown-item&quot;&gt;By Rating&lt;/a&gt;
            &lt;a href=&quot;{% url &#39;products&#39; %}?category=wheight&quot; class=&quot;dropdown-item&quot;&gt;By Wheight&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt; 
&lt;/div&gt; 

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.

huangapple
  • 本文由 发表于 2023年3月7日 21:11:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/75662421.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定