忽略Jquery附加的div CSS类+功能

我有一个按钮被点击，一旦点击它的变化从压缩到折叠，反之亦然。我首先将它作为一个普通块附加到我的内容区域，一旦单击，它就会扩展为一个菜单。然后，我继续将相同的按钮附加到菜单本身，并替换该值，使其表示一个向左箭头。该按钮将“类搁置”按钮作为永久默认设置，并在搁置折叠和搁置压缩之间进行适当切换。我的问题是，一旦按钮附加到菜单的li，它就会忽略旁边的按钮css及其功能。我们将非常感谢您的任何帮助。多谢各位

JQUERY

(function ($, Drupal){
  Drupal.behaviors.asideColldense = {
   attach : function() {
        $('<div class=aside-button><p>&#9654;</p></div>').appendTo('#content');
        $('.aside-button').addClass('aside-condensed');
        var aside = $('#block-panels-mini-aside-navigation');
        aside.hide();

        function collapseOrCondense(event) {
          aside.toggle();
          $('.aside-button').toggleClass('aside-collapsed');
          $('.aside-button').toggleClass('aside-condensed');
          if($('.aside-button').hasClass('aside-collapsed')) {
            $('.aside-button p').contents().replaceWith('&#9664;');
            $('.aside-button').appendTo('.aside-menu li.menu-path-hosting');    
          } 
          else{
            $('.aside-menu li.menu-path-hosting .aside-button   p').contents().replaceWith('&#9654;');
            $('.aside-menu li.menu-path-hosting .aside-button').appendTo('#content');
          }
  }
  $('.aside-button').on('click', collapseOrCondense);
 }
}

})(jQuery, Drupal);

图画

浓缩的，有效的

---

折叠按钮高亮显示为黄色，忽略了旁边的按钮css和jquery，因此它也拒绝关闭

段落宽度似乎与按钮重叠，并阻止了按钮应有的反应，通过将按钮移动到页面底部p不平行的位置来解决这一问题。谢谢大家的时间。

这是我的意图，尽管我必须等待2天才能将其标记为固定标签，但我使用固定标签作为临时替代品，以达到相同的目的。但是经验会说话，所以我会听老板的。

  .aside-menu ul.nice-menu li {
      border: .118em solid rgb(90,90,90);
      float: left;
      background: rgb(38,38,38);
    }

   .aside-menu {
     margin: 0;
     padding: 0;
     z-index: 10;
     display: inline-block;
   }

   .aside-condensed {
     position: fixed;
     display: inline-block;
     top: 50vmin;
     left: 0%;
     margin: 0;  
     width: 5vmin;
     z-index: 10;
   }

    .aside-collapsed {
      display: inline-block;
      /* float: right; */
      margin: 0;  
     }

     .aside-button p {
       background-color: rgb(38,38,37);
       text-align: center;
       cursor: pointer;
       border: rgb(222,222,222) solid 2px;
       border-left: none;
       padding: 17.5% .5% 17.5% 0;
       margin: 0;
       font-size: 2.5vmin;
       }

       .aside-button p:hover {
         background-color: rgb(222,222,222);
         color: rgb(50,50,41);
         border: rgb(50,50,41) solid 2px;
         border-left: none;
         padding-bottom: 13.5%;
        } 

      .aside-collapsed p {
        border: none;
        font-size: 1.75vw;
       }

      .aside-collapsed p:hover {
        background-color: rgb(38,38,37);
        color: rgb(255,255,255);
        border: none;
        border-left: none;
        padding-bottom: 13.5%; 
        }