link 环境中的下拉菜单不起作用

Question

我正在尝试在 link 环境中放置下拉 select 菜单：（我还读到 HTML5，可以在 div 周围放置 "a" 环境。有什么想法吗？）

            <a href="">
                <div id="foo">
                    <select>
                        <option value="a">Stuff</option>
                        <option value="b">More stuff</option>
                    </select>
                </div>
            </a>

无论如何，至少在 Chrome 这不能正常工作：如果我打开菜单，单击 link 环境并刷新页面。在 IE 中，这确实如我所愿。我尝试了 z-index，但这不适用于 Chrome。

提前致谢，

伦纳特

Answer 1

两种方法，都很简单。

去掉<a>元素的href=""部分。这就是发送回发请求和刷新页面的内容。
如果您想保留 link 无论出于何种原因。使点击事件 return 为假。将此添加到 <a> 标签：onclick="return false;".

像这样：

<a href="" onclick="return false;">
  <div id="foo">
    <select>
      <option value="a">Stuff</option>
      <option value="b">More stuff</option>
    </select>
  </div>
</a>

如果你想自动化第二种方法，你可以添加一些javascript:

var dropdownlink = document.getElementsByTagName("a");

for (var i = 0; i < dropdownlink.length; i++) {
  if (dropdownlink[i].getElementsByTagName("select").length > 0) {
    dropdownlink[i].onclick = function() {
      return false;
    };
  }
}

<a href="k">
  <div id="foo">
    <select>
      <option value="a">Stuff</option>
      <option value="b">More stuff</option>
    </select>
  </div>
</a>

<a href="">Test Link</a>

link 环境中的下拉菜单不起作用

Dropdown within link environment does not work

css

html

google-chrome

href