Функция Jquery добавить / удалить класс из div при наведении курсора - PullRequest
Новая
       47

Функция Jquery добавить / удалить класс из div при наведении курсора

0 голосов
/ 30 января 2019

У меня есть этот jquery-скрипт, с которым я получил некоторую помощь при создании, чтобы добавить / удалить «активный» класс в div при наведении курсора на кнопку.

Ниже CodePen того, что я поставилвместе:

CodePen Link : https://codepen.io/dustin-keeslar/pen/dapLWM

Это работает хорошо, однако я пытаюсь изменить это, чтобы кнопка была нажата последней, чтобы сохранить«активный» класс по содержанию.Таким образом, содержимое изменяется только при наведении на другую кнопку. 

jQuery(document).ready(function() {

  jQuery(".toggle-button").hover(function() {
    var target = jQuery(this).data("target");

    if (jQuery(this).hasClass("expand")) {
      jQuery(this).toggleClass("expand");

      jQuery("#" + target).removeClass("active");
    } else {
      jQuery(".toggle-button").removeClass("expand");
      jQuery(".hidden-content").removeClass("active");

      jQuery(this).toggleClass('expand');

      jQuery("#" + target).toggleClass("active");
    }

  });
});

Эта кнопка найдет кнопку, например, data-target=content1", а при наведении на нее переключит «активный» класс.в div с идентификатором "content1".Проблема в том, что когда вы больше не зависаете, все исчезает.Мне нужна самая последняя зависшая кнопка, чтобы сохранить «активный» класс в контенте.Но мне также нужно, чтобы содержимое динамически изменялось при наведении на следующую кнопку.

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Все, что вам не хватает, это проверка, чтобы убедиться, что текущий элемент соответствует цели: 

 jQuery(this).attr('id') == target

Кодовый код здесь: https://codepen.io/anon/pen/VgKOPy

0 голосов
/ 30 января 2019

Затем исправьте это, чтобы использовать mouseenter, и переместите код удаления вверх, чтобы удалить ваши классы, прежде чем добавлять их обратно к элементу, который был введен.Я не совсем понимаю, что вы пытаетесь сделать здесь, но при использовании mouseenter это должно выглядеть примерно так: 

jQuery(document).ready(function() {

jQuery(".toggle-button").mouseenter(function() {
  jQuery(".toggle-button").removeClass("expand");
 //      jQuery(".hidden-content").removeClass("active");
  $(".active").removeClass("active");
  var target = jQuery(this).data("target");
  jQuery("#" + target).addClass("active");

  if (jQuery(this).hasClass("expand")) {
    jQuery(this).removeClass("expand");

    jQuery("#" + target).removeClass("active");
  }

});
});
...