JQuery Добавлен div Класс CSS + функциональность игнорируется

Question

У меня есть кнопка, щелкнувшая по ее изменениям от сгущенного до сложенного и наоборот. Сначала я добавляю его в область содержимого как обычный блок, который после щелчка расширяется, чтобы стать меню. Затем я приступаю к тому, чтобы добавить ту же кнопку к самому меню и заменить значение, чтобы оно обозначало стрелку влево. Кнопка имеет кнопку класса в качестве постоянного дефолта и переключается между обвалами и сглаживанием соответственно. Моя проблема заключается в том, что, как только кнопка добавляется в ли меню, она игнорирует кнопку 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); 

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

PICTURE

сгущенные, работает

кнопки свернутой highlighed желтого цвет, игнорирует сторону кнопок CSS и JQuery, поэтому он также отказывается закрыть

Answer 1

Параграфов ширины казались перекрывать кнопку и предотвратить его от реакции, как и должно быть, понял, это перемещение кнопки в нижней части страницы, где p не были параллельными. Спасибо всем за время.