Как выделить открытую вкладку js?

Question

[dolban4ik]

Здравствуйте!
Как можно сделать так, чтобы при открытом блоке search, icon выделялся, а при закрытии search, выделение исчезало

<div id="icon">
          <div id="search">
          </div>
      </div>

$('#search').click(function(ev) {
     ev.stopPropagation();
});
$("#icon").click(function() {
    $('#search').fadeToggle(350);
});
  $(document).on('click', function(e) {
    if (!$(e.target).closest("#icon").length) {
      $('#search').hide();
    }
    e.stopPropagation();
  });

Comments

[Сергей delphinpro]

Что в вашем понимании "выделялся"?

[Никита Ермиличев]

css приложите, пожалуйста

[dolban4ik]

Никита,

#icon :hover{
  background: #2EE59D;
  box-shadow: 0 15px 20px rgba(46,229,157,.4);
  color: white;
  transform: translateY(-5px);
  transition: .3s;
}
#icon :active{
  transform: translateY(-1px);
  transition: .2s;
}
#search{
  width: 240px;
  height: auto;
  display:none;
  padding:17px;
  margin-top:18px;
  background: white;
}

Answer 1

[Алексей Джо]

icon - внутри search. иконка является частью поиска, а не поиск частью иконки. и тогда все станет намного проще: можно писать конструкции #search.opened .search__icon

jsfiddle.net/fcrks29j

<div id="search">
  <div class="search__icon">    
  </div>
</div>

#search{
  width: 150px;
  height: 50px;
  background-color: #ff0000;
}

#search.opened{
  background-color: #0000ff;
}

#search.opened .search__icon{
  background-color: #ffff00;
}

.search__icon{
  width: 50px;
  height: 50px;
  background-color: #00ff00;
}

$("#search").on("click", function(){
	$(this).toggleClass("opened");
});