Нужно добавить класс, чтобы скрыть и показать элемент, когда активен

Question

Я новичок в jquery. У меня есть меню боковой панели с классом "sidebar-mini" (прикрепленный к элементу) "sidebar-collapse", "sidebar-open" - это классы, добавленные при переключении. Но мне просто нужно добавить класс, чтобы скрыть и отобразить lo go, прикрепленный к боковой панели, как только он рухнет, чтобы сделать UX более эффективным. Я пробовал множество кодов, но не нашел решения. Пожалуйста, помогите.

Я нацеливаюсь на боковую панель, вот go, чтобы скрыть

var sidebar = $('.sidebar-mini');
var logo = $('.sidebar-logo');
var sidebarcollapse = $('.sidebar-collapse');

...

$(document).ready(function(){
    if ( $('body').hasClass('sidebar-collapse') ) {
      $('.sidebar-logo').addClass('hide-logo');
    }
  });

...

Я тоже это попробовал ...

if($('.sidebar-collpase').length > 0) {
  logo.addClass('hide-logo');
} else {}

...

...

if ($(sidebarCollapse == true)) {

 logo.addClass('hide-logo');
} else {
 logo.removeClass('hide-logo');
}

...

css Я намерен скрыть lo go и отобразить

// HIDE SIDEBAR-LOGO AND DISPLAY
.hide-logo {
  display: none;
  opacity: 0;
}

.display-logo {
  display: block;
  opacity: 1;
}

Answer 1

Добавить CSS

.display-logo {
  display: block;
  opacity: 1;
} 
/*Add This CSS*/
.sidebar-collapse .display-logo
{
  display: none;
  opacity: 0;
}

Answer 2

Вы можете просто переключить отображение lo go, добавив еще одну функцию, скажем, checkBody(), которая проверяет список классов тела при каждом запуске функции, которая переключает ваше боковое меню.

In В следующем примере я буду использовать div в качестве фиктивного представления lo go и кнопку в качестве фиктивного представителя скрытого или показанного бокового меню:

function checkBody(){
  if ( $('body').hasClass('sidebar-collapse') ) {
    $('.sidebar-logo').addClass('hide-logo');
  } else {
    $('.sidebar-logo').removeClass('hide-logo');
  }
};

$('#btn').click(function(){
  $('body').toggleClass("sidebar-collapse");
  checkBody();
})

.sidebar-logo {
  padding: 5px;
  background-color: #222;
  color: #FFF;
}
.hide-logo {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- dummy elements -->

<div class="sidebar-logo">LOGO</div>
<button id="btn">Click me</button>

Просто добавьте функцию checkBody вне функции, которая переключает боковую панель, и добавьте ссылку на эту функцию checkBody();, как я сделал в функции прослушивания щелчка внутри функции, которая переключает боковую панель.

Функция прослушивания щелчка выше представляет функцию, которая переключает меню боковой панели.