javascript - Jquery Toggle 不使用兄弟 div

Question

我已经为此挠头好几个小时了。此代码应该使 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>

JS（我认为错误出在此处，但控制台没有显示任何错误）：

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

CSS：

#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;
}

Answer 1

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

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