Question

有人知道如何制作而不是这个

    <select id="drop">
       <option value='table1'>table1</option>
       <option value='table2'>table2</option>
    </select>

像这样的dropmenu

    <div class='dropdown'>
    <button class='dropbtn'>Current choice<i class='fa fa-caret-down'></i></button>
    <div class='dropdown-content'>
    <a>table1</a>
    <a>table2</a>
    </div>
    </div>

我认为这是不可能的，因为你需要为此重新加载页面，这在php或至少没有ajax时是不可能的。这是一个jsfiddle与第一个Fiddle

下拉列表包含必须显示但未在选中时显示的表格，因此您选择table1，显示table1，当您选择table2时，将显示table2，但table1将再次隐藏。

为什么我要改变它是因为你不能在下拉列表中使用css所以它看起来很丑陋。

有人知道或至少让我知道是否有可能

三江源

Answer 1

最好不要重新发明轮子。因此，我建议您使用UI框架，例如Bootstrap（下拉列表），或者更好的是jQuery-UI（selectmenu），因为您已经在使用jQuery。

Answer 2

嗯，我希望这就是你所需要的。我从jsFiddle复制了所有的html，并将select替换为div下拉列表。

这是div下拉列表html：

<div class='dropdown'>
  <button class='dropbtn'>
    Current choice
    <i class='fa fa-caret-down'></i>
  </button>
  <div class='dropdown-content'>
    <a href="#table1">table1</a>
    <a href="#table2">table2</a>
  </div>
</div>

这是我的js：

$(document).ready(function() {
  //hide both tables and dropdown on page-load
  $("table, .dropdown-content").hide();

  //to make dropdown work
  $(".dropbtn").click(function() {
    //changes show/hide state
    $(".dropdown-content").toggle();
  });

  //fires when <a> in dropdown is clicked
  $(".dropdown-content a").click(function(event) {
    //prevents page refresh
    event.preventDefault();
    //hides both tables
    $("table").hide();
    //shows only desired
    $($(this).attr("href")).show();
    //modifies text in button
    $(".dropbtn").find("i").text(" " + $(this).text());
  });
});

带有href和div的html / jquery下拉菜单

2 个答案: