Javascript Jquery切换不使用sibling div

我已经为这件事挠头好几个小时了。此代码应该使div可见，但它不起作用

<div id="butbr">
  <div id="sup_nav">
    <div id="stup" class="bxt1"></div>
    <div id="exep" class="bxt1"></div>
    <div id="trat" class="bxt1"></div>
    <div id="tstm" class="bxt2"></div>
    <div id="whys" class="bxt3"></div>
    <div id="regu" class="bxt3"></div>
  </div>
  <a id="btn_sup" href="">
    <div id="top_nav">
      <img src="../images/logos/mcwb.png" alt="">
    </div>
  </a>
</div>

CSS:

---

当您单击正在重新加载页面的锚定选项卡时，请停止默认操作

$(document).ready(function (e) {
    $("#btn_sup").click(function (e) {
        $("#sup_nav").show();
        e.preventDefault()
    });
});

---

刚刚发现：连续点击链接3-4次，让它看起来像是又像是消失了。。

#butbr {
    background-color: #FFF;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    min-width: 200px;
    height: auto;
    border-radius: 0 0 5px 5px;
    /*box-shadow: 0px 3px 12px rgba(50, 50, 50, 0.58);*/
    box-shadow:0px 2px 2px rgba(50, 50, 50, 0.3);
}

#btn_sup {
    width: 100%;
    height: 60px;
    display: block;
    z-index: 5;
}

#sup_nav {
    width: 75%;
    height: 525px;
    display: none;
}

$(document).ready(function (e) {
    $("#btn_sup").click(function (e) {
        $("#sup_nav").show();
        e.preventDefault()
    });
});