CSS显示块不适用于某个元素

Question

在我创建的自上而下的滑动菜单中，关闭按钮（close-btn-2）是通过Jquery动态添加的，但我绝不可以将display：block属性应用于它。此关闭按钮位于同一div中，其中display：block属性与所有其他元素一起正常工作。另一个关闭按钮（close-btn;在某个窗口宽度消失）工作正常。

HTML：

<div class="sidebar">
        <a href="#" id="close-btn">&times;</a>
        <a href="#" id="close-btn-2">&times;</a>
        <a href="#">Accomodations</a>
        <a href="#">Services</a>
        <a href="#">Merchandising</a>
        <a href="#">About us</a>
    </div>

CSS

.sidebar {
   height: 640px;
   width: 0px;
   background-color: black;
   float: right;
   overflow: hidden;
   position: absolute;
   top: 0;
   right: 0;
   transition: 0.5s;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
 }

.sidebar a {
   display: block;
   text-decoration: none;
   padding: 20px;
   font-size: 20px;
}

.sidebar a:hover {
   background-color: #ff0066;
   color: black;
   text-decoration: none;
}

Jquery的

else if (width < 415) {

      $("#menu-btn").hide();
      $("#menu-btn-2").show();

      $("#close-btn").hide();
      $("#close-btn-2").show();

      $("#menu-btn-2").on("click", function() {
         $(".sidebar").attr("id", "topbar-on");
         $(".inner-title").fadeOut("fast"); 
      });

      $("#close-btn-2").on("click", function() {
         $(".sidebar").removeAttr("id", "topbar-on");
         $(".inner-title").fadeIn("slow");  
      });


  }

Answer 1

事实证明，我把它弄乱了。

首先，我决定使用一个关闭按钮（顺便说一下，我切换到了按钮标签）。我给了它一个宽度和一个高度（除了display：block css属性），以便使其使用菜单的整个宽度，并使悬停动画按照我想要的方式工作。

正如@denis所建议的那样，媒体查询更容易用于响应，因此我摆脱了所有jQuery window.resize的情况，并使用媒体查询来更改样式菜单的样式。