Bootstrap 将选择列表更改为带链接的下拉列表

nfzehxib  于 2023-01-10  发布在  Bootstrap
关注(0)|答案(1)|浏览(142)

我犯了一个错误,创建了我的网站与选择下拉列表,现在在移动的每一个下拉列表是打开像一个弹出窗口,看起来像这个怪物:

例如,我有这个下拉列表用于排序项目与PHP函数,所以我想把它转换成正常的下拉列表(ul li),但我不知道如何推动相同的PHP函数排序。
如果我创建了带链接的UL,我应该把PHP函数放到href中还是把它作为属性保留?
或者,我能以某种方式阻止移动的设备打开这些丑陋的弹出窗口吗?
这是我的下拉选择列表排序:

<select name="sort-me" id="sort-me" >
  <option value="">Sort by</option>
  <option value="0" <?=$sort=='0' ? 'selected' : ''?> sort="sort-price-up">
    Sort by price (ascending)
  </option>
  <option value="1" <?=$sort=='1' ? 'selected' : ''?> sort="sort-price-down">
    Sort by price (descending)
  </option>
</select>

我试过像这样转换它,但这不会工作:

<div class="dropdown-wrap">
  <button id="sort-me" name="sort-me" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Sort by
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" value="0" <?=$sort=='0' ? 'selected' : ''?> sort="sort-price-up">Sort by price (ascending)</a>
    <a class="dropdown-item" value="1" <?=$sort=='1' ? 'selected' : ''?> sort="sort-price-down">Sort by price (descending)</a>
  </div>
</div>
krcsximq

krcsximq1#

我希望你能正确理解你的意思:Image

<div class="dropdown-wrap">
    <button id="sort-me" name="sort-me" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Sort by
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item <?= $sort == '0' ? 'bi-check-lg' : '' ?>" value="0" sort="sort-price-up">Sort by price (ascending)</a>
        <a class="dropdown-item <?= $sort == '0' ? 'bi-check-lg' : '' ?>" value="1" sort="sort-price-down">Sort by price (descending)</a>
    </div>
</div>

你可以使用引导图标,剩下的就看你在哪里以及如何使用它了。

相关问题