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

Question

我有一个按钮被点击，一旦点击它从压缩到折叠的变化，反之亦然。我首先将它作为一个普通 block 附加到我的内容区域，一旦单击它就会展开成为一个菜单。然后我继续将相同的按钮附加到菜单本身并替换值，使其表示左箭头。该按钮具有 aside-button 类作为永久默认值，并在 aside-collapsed 和 aside-condensed 之间适当切换。我的问题是，一旦按钮附加到菜单的 li 上，它就会忽略 aside-button 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

  .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

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