Javascript切换可见性，在下面显示文本

Question

当我单击*****时，它将在新行下面显示api密钥。我想做的是，当我单击星星时，它将隐藏星星并显示apikey，然后有人可以指出我出了错的地方。

我的图片：

我的代码：

<li class="list-group-item">
    <i class="fa fa-tasks"></i> API Access:<span class="badge badge-danger pull-right"><span onclick="toggle_visibility('foo');">********</span>
    <div id="foo" style="display:none;"><span class="label label-info"><?php echo ( isset($userInfo['apikey']) && !empty($userInfo['apikey']) ? $userInfo['apikey'] : "No" ); ?></span></div>
    </span>
    </a>
</li>
<script type="text/javascript">
    <!--
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if (e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
    //-->
</script>`

Answer 1

您应该在同一跨度中执行此操作以在同一行中查看

尝试

<li class="list-group-item">
	<i class="fa fa-tasks"></i>
	API Access:
	<span class="badge badge-danger pull-right">
		<span onclick="toggle_visibility('e_1','e_2');"><span id="e_1">********</span><span id="e_2" style="display:none;">API_KEY</span></span>
	</span>
</li>
<script type="text/javascript">
function toggle_visibility(id_1,id_2) {
	var e_1 = document.getElementById(id_1);
	var e_2 = document.getElementById(id_2);
	if ( e_1.style.display==='inline-block' || e_1.style.display === '' ) {
		e_1.style.display = 'none';
		e_2.style.display = 'inline-block';
	} else {
		e_1.style.display = 'inline-block';
		e_2.style.display = 'none';
	}
}
</script>				

Answer 2

您可以通过多种方式改进代码，并使其按需工作。我简化了HTML结构和js，考虑了从html节点调用时的功能行为。

<li class="list-group-item">
  <i class="fa fa-tasks"></i>
  API Access:
  <span class="badge badge-danger pull-right">
    <span onclick="show_apikey(<?php echo ( isset($userInfo['apikey']) && !empty($userInfo['apikey']) ? $userInfo['apikey'] : "No" ); ?>);">********</span>
  </span>
</li>
<script type="text/javascript">
<!--
function show_apikey(apikey) {
  this.innerText = apikey;
}
//-->
</script>