考虑以下代码：

<table>
  <tr>
    <td onclick="shownav()">Equations of Circle
      <div id="myDownnav" class="sidenav">
        <a>General Info</a>
        <a>In Polar Coordinates</a>
        <a>From two end-points of the diameter</a>
        <a>Passing through three points</a>
      </div>
    </td>
  </tr>
</table>

字符串
我想在四个链接div的id myDownnav将显示在点击td元素Equations of Circle。在这里，我有以下CSS样式：

.sidenav{
  height: 0; /*Changes with JavaScript*/
  width: 100%; 
  position: relative; 
  z-index: 10;
  top: 0; 
  left: 0;
  background-color: rgba(0,0,0,0.6);
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav down*/
}

/* The navigation menu links */
.sidenav a {
  padding: 10px;
  text-decoration: none;
  font-size: inherit;
  color: lightsteelblue;
  display: block;
  transition: 0.3s;
  background-color: rgba(0,0,0,0.5);
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: lightsteelblue;
  background-color: rgba(0,0,0);
}

型
最后，我的JavaScript函数shownav（）：

function shownav(){
  var z=document.getElementById('myDownnav').style;
    document.getElementById("myDownnav").style.height =z.height==0? '100%': 0;
}

型
我需要改变什么？我面临以下问题：
1.所有四个链接都显示在前面，甚至在我单击td之前
1.单击td后，只有背景发生变化。
1.我永远不能使链接消失，即使在点击了一些，虽然我已经取得了div的高度为0。
注意：我已经知道不鼓励使用onclick或其他内联函数。任何其他建议都将被接受。