Question

我一直在寻找一种打开select / combobox点击另一个元素的方法。我读到的答案说这是不可能的但是...... facebook是如何做到的？

在你的Facebook时间线中，当你想要更改状态的日期时，有一个ahchor，当你点击它时，会出现一个组合框。我认为他们已经将样式应用于他们的选择，所以它看起来像锚，但它不是那样的。

他们的HTML代码有一个锚和一个select元素，最后一个是隐藏的。然后，我知道select元素定位为绝对元素，但我无法从它们的javascript代码中获取它是如何工作的。

我试着像这样模拟它

$('#element').click();
document.getElementById('element').click();

这些都不起作用。我看到一个复制SELECT元素的脚本，但它为它添加了2个属性：multiple和size。这会改变选择的外观。

我想知道怎么可能？我知道也许它不适用于IE＆lt; 9。

Answer 1

我们正在谈论这个？

<span class="period periodDay">
   <a class="uiIconText periodLabel" style="padding-left: 11px;"><img class="img" src="https://s-static.ak.facebook.com/rsrc.php/v1/yo/r/5-fr6z6ewzf.png" alt="" style="top: 4px;" width="6" height="6" />Tag hinzufügen</a>
   <select data-name="day" class="periodMenu dayMenu" name="backdated_date[day]">
      <option value="">Tag:</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="2">more days...</option>
   </select>
</span>

<a>标记位于<select>上方，点击通过管道传输。如果单击右侧的链接则不起作用。

<强>更新

您可以使用此技巧打开选择。将选择放在锚点下方，然后在单击后移动锚点。

<select id="moveme" style="position: relative;"
    onmousedown="$('#moveme').css('left', '100px');">
  <option value="">Tag:</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">more days...</option>
</select>

演示：http://jsfiddle.net/HfFWr/1/

在Firefox，Chrome和IE中测试过。

打开选择使用javascript单击另一个元素

1 个答案: