Почему этот код вызывает исчезновение div?

Question

Я искал последние пару часов, чтобы выяснить, почему это приводит к исчезновению div.Я пытаюсь заставить цвет фона переключаться при нажатии.По сути, я хочу, чтобы при выделении фон был темнее, указывая, что он выбран.Затем после повторного нажатия вернитесь к нормам.

Я использую jQuery 3.3.1

Вот JSFiddle

HTML

<div id="readMailFunctionCellReply"><img src="images/reply.png" title="Reply" /><br>Reply</div>

CSS

#readMailFunctionCellReply{
justify-content: center;
padding-top:10px;
padding-bottom:5px;
text-align: center;
/* border: 1px solid #a45127; */
color:#a45127;
}
#readMailFunctionCellReply:hover{
cursor:pointer;
background-color: #ffedc5;
text-decoration: underline;
color:#a45127;
}

Javascript

$(document).on('click', '#readMailFunctionCellReply', function() {

   $("#readMailFunctionCellReply").toggle(
      function() { 
         $("#readMailFunctionCellReply").css("background-color:#ffedc5");
      },
      function() {
         $("#readMailFunctionCellReply").css("background-color:");
      }
   );
})

Спасибо за любую помощь!

Answer 1

То, что вы ищете, это не .toggle , а .toggleClass .Первый фактически переключает сам элемент, скрывая и показывая его.Toggleclass, с другой стороны, делает то, что говорит на жестяной банке, он вставляет класс CSS в элемент и из него.Все, что вам нужно, это реализовать соответствующий класс CSS.

JS:

$(document).on('click', '#readMailFunctionCellReply', function() {
    $("#readMailFunctionCellReply").toggleClass("selected"); 
});

CSS:

#readMailFunctionCellReply.selected{
    background-color: pink;
}

JsFiddle, используя розовый цвет для добавления пиццы: https://jsfiddle.net/6kswc9ug/

Answer 2

Исходя из ваших потребностей, у меня есть следующий код для вас.

$("#readMailFunctionCellReply").click(function(){
			$("#readMailFunctionCellReply").toggleClass("orangeBG");
});

#readMailFunctionCellReply{
	justify-content: center;
	padding-top:10px;
	padding-bottom:5px;
	text-align: center;
	/* border: 1px solid #a45127; */
	color:#a45127;
}
#readMailFunctionCellReply:hover{
	cursor:pointer;
	background-color: #ffedc5;
	text-decoration: underline;
	color:#a45127;
}
.orangeBG {
  background-color: #ffedc5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="readMailFunctionCellReply"><img src="images/reply.png" title="Reply" /><br>Reply</div>

Answer 3

вам нужно удалить:

 $("#readMailFunctionCellReply").toggle(function()

функция переключения включает видимость элемента, скорее вам нужно использовать addClass или toggleClass.

У меня есть рабочая скрипка:

https://jsfiddle.net/Preston17/vo4kaj6d/

Answer 4

Используйте toggleClass () вместо toggle () (и добавьте класс в свой CSS):

CSS:

 #readMailFunctionCellReply{
  justify-content: center;
  padding-top:10px;
  padding-bottom:5px;
  text-align: center;
  /* border: 1px solid #a45127; */
  color:#a45127;
}
#readMailFunctionCellReply.selected{
  background-color:#ffedc5;
}
#readMailFunctionCellReply:hover{
  cursor:pointer;
  background-color: #ffedc5;
  text-decoration: underline;
  color:#a45127;
}

JS:

$(document).on('click', '#readMailFunctionCellReply', function() {

    $("#readMailFunctionCellReply").toggleClass("selected");

})

или для JS:

$('#readMailFunctionCellReply').click(function() {

  $(this).toggleClass("selected");

})

Функция toggle () изменяет свойство отображения (отображает или скрывает соответствующие элементы).Проверьте документацию для получения более подробной информации.