需要添加一个类来隐藏和显示活动后的元素

Question

我是jquery的新手。我有一个带有" sidebar -mini“类的侧边栏菜单(附加到元素)”sidebar- class“"sidebar-open”是在切换时添加的类。但我只需要添加一个类来隐藏和显示附加到侧边栏的徽标，一旦它折叠，使UX更有效。我尝试了无数的代码，但没有解决方案。请帮帮忙。

我瞄准了侧边栏，要隐藏的徽标

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

// 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

您可以通过添加另一个函数来切换徽标的显示，例如，每当您运行切换您的侧边菜单的函数时，checkBody()都会检查body类列表。

在下面的示例中，我将使用div作为徽标的虚拟表示，使用按钮作为隐藏或显示的侧边菜单的虚拟表示：

​

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();的引用，就像我在切换侧边栏的函数内的单击侦听器函数中所做的那样。

上面的click listener函数表示切换侧边栏菜单的函数。