Javascript下拉菜单onclick

我试图在单击“编辑”图标时显示一个下拉列表，但似乎无法使其正常工作

javascript:

function drop() {
  document.getElementById('bsts').style.visibility='hidden';
  document.getElementById('bdrop').style.visibility='visible';
}

HTML:

永久的
暂时的
没有一个

关于如何使它工作有什么想法吗？ 我有多个div，当我按下edit时，只有第一个有效。

试试这个

$('body').on('click', '.yourDivClassOrId', function()){
     $('.elementToShowOnClick').slideDown();
}

<script>
    function drop() {
  document.getElementById('bsts').style.visibility='hidden';
  document.getElementById('bdrop').style.visibility='visible';
}
</script>
<div id='bsts' style="visibility: visible;">
  <span class='label label-danger'>Permanent</span>
</div>

<div id='bdrop' style="visibility: hidden;">
  <select>
    <option>Temporary</option>
    <option>None</option>
  </select>
</div>

<a href='#' onclick="drop()">Edit<span class="glyphicon glyphicon-pencil"></span></a>

函数drop（）{
document.getElementById（'bsts'）.style.visibility='hidden'；
document.getElementById（'bdrop'）.style.visibility='visible'；
}
永久的
暂时的
没有一个

请在发布代码之前格式化代码。如何调用

drop（）

方法？@Praveen yes。在这里工作很好：

jQuery

？它没有被标记。您能告诉我为什么要使用OP吗？现在是2014年，如果您不使用Jquery，是时候升级了。@HonorableChow，是的，但对于这样简单的事情，加载整个库是没有意义的，对吗？：）这正是我发布的内容。我的问题是我有多个div，当我按下edit时，只会编辑第一个divworks@nevermind代码是有效的，但是我在一个表中使用了这个代码，所以我不止一次地使用它，当我按Edit时，只使用第一个works@Joe96，当然，因为您使用的是ID，而元素ID在整个页面中是/应该是唯一的。

<script>
    function drop() {
  document.getElementById('bsts').style.visibility='hidden';
  document.getElementById('bdrop').style.visibility='visible';
}
</script>
<div id='bsts' style="visibility: visible;">
  <span class='label label-danger'>Permanent</span>
</div>

<div id='bdrop' style="visibility: hidden;">
  <select>
    <option>Temporary</option>
    <option>None</option>
  </select>
</div>

<a href='#' onclick="drop()">Edit<span class="glyphicon glyphicon-pencil"></span></a>