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

Question

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

THE 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

  .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%; 
        }

照片

凝聚，工作

折叠按钮高亮黄色，忽略旁按钮css和jquery，所以它也拒绝关闭

Answer 1

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