Question

我正在寻找基于点击的单一选择列表。而不是正常的下拉列表，我想要一个叠加菜单（类似于我们在更改隐私设置时在Facebook上看到的方式，出现的单个选择列表）。是基于CSS还是任何代码示例来创建类似的列表？我在网上找到的所有列表都是悬停列表，与我们在f / b上看到的不一样。

感谢。

这样的事情： alt text

Answer 1

这只是一个弹出的菜单，用户可以选择一个选项。

如果您使用的是jQuery，它就像这个插件 http://plugins.jquery.com/project/selectbox

Answer 2

我找不到非JS解决方案（对于JS，我正在使用jQuery将focus分配给任意元素，以保持子菜单打开（在正面），我非常确定Facebook将使用某种类型的JavaScript来实现它们的实现。

然而，我已经汇总了几个例子，这些例子就像Facebook一样，只是下拉列表，用JavaScript处理程序将focus分配给被点击的元素（以保持子菜单无论如何鼠标在页面上的位置，直到用户点击其他地方为止。

考虑到这一点，我使用了标准的css下拉式标记：

  <ul>
    <li><a href="#">Symbol</a>
      <ul>
        <li>option 1</li>
        <li>option 2</li>
        <li>option 3</li>
      </ul>
    </li>
    <li><a href="#">Symbol</a>
      <ul>
        <li>option 1</li>
        <li>option 2</li>
        <li>option 3</li>
      </ul>
    </li>
    <li><a href="#">Symbol</a>
      <ul>
        <li>option 1</li>
        <li>option 2</li>
        <li>option 3</li>
      </ul>
    </li>
  </ul>

使用css：

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
  }
  ul li {
    display: inline-block;
    position: relative;
    width: 100px;
    border-bottom: 1px solid #ccc;
  }
  ul li ul {
    display: none;
    width: 100%;
    position: absolute;
    top: 1em;
    left: 0;
  }

  ul li a:hover + ul,
  ul li a:active + ul,
  ul li a:focus + ul {
    display: block;
  }

  ul li ul li {
    border: 0 none transparent;
  }

和jQuery：

$(document).ready(
  function() {
    $('li a').click(
      function(){
        $(this).focus();
      });
  }
  );

Demo at JS Bin

请注意，我使用了a个元素，因为focus更容易分配给锚点而不是普通的，在本例中为li元素。但是，第二个版本具有相同的最终结果，使用以下jQuery实现：

$(document).ready(
  function() {
    $('li').click(
      function(){
        $('li').not(this).removeAttr('tabindex');
        $(this).attr('tabindex','-1').focus();
      });
  }
  );

Demo at JS Bin

<小时/> 的附加物

CSS Play 的Stu Nicholls似乎已经为此实现了纯粹的css解决方案（with a gallery），但我没有通过他的CSS来实现看他是怎么做到的。

CSS单选列表示例

2 个答案: