jquery active class

Question

имеется такой код при наведении мыши на текст сбоку должна появляться линия но если у него уже есть активный класс который добавляется при клике mouseover не должна среагировать то есть если у него активный класс тогда при наведении линия не должна пропадать

$('.list li').click(function(){
$('span').removeClass('active');
$(this).children('span').addClass('active')
})


$('ul li').mouseover(function(){
if(!$(this).children('span').hasClass('active')){
$(this).children('span').addClass('active');
}

})

$('ul li').mouseout(function(){
$(this).children('span').removeClass('active');
})

.active{
  width: 200px;
  height: 20px;
  background-color: orange;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<ul class="list">
  

  <li class="first">
  Lorem ipsum dolor sit amet.
    <span class="orange-line active"></span>
  </li>
  
    <li class="second">
    Lorem ipsum dolor sit amet.
    <span class="orange-line"></span>
  </li>
      <li class="third">
      Lorem ipsum dolor sit amet.
    <span class="orange-line"></span>
  </li>
  </ul>
</body>
</html>

Answer 1

Такой вариант пойдёт?

let liEnter = false;

$('.list').on('mouseenter', 'li', function() {
  if(!$(this).find('.orange-line').hasClass('active')) {
    liEnter = $(this);
    liEnter.find('.orange-line').addClass('active');
  }
}).on('mouseleave', 'li', function() {
  if(liEnter !== false) {
    liEnter.find('.orange-line').removeClass('active');
    liEnter = false;
  }
}).on('click', 'li', function() {
  $(this).closest('.list').find('.orange-line.active').removeClass('active');
  $(this).find('.orange-line').addClass('active');
  liEnter = false;
});

.active {
  width: 200px;
  height: 20px;
  background-color: orange;
  display: inline-block;
}

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

<ul class="list">
  <li class="first">
    Lorem ipsum dolor sit amet.
    <span class="orange-line active"></span>
  </li>

  <li class="second">
    Lorem ipsum dolor sit amet.
    <span class="orange-line"></span>
  </li>
  <li class="third">
    Lorem ipsum dolor sit amet.
    <span class="orange-line"></span>
  </li>
</ul>

А вообще советовал бы вешать .active на li и через CSS обращаться уже к .orange-line.
Так и красивее, и проще.

let liEnter = false;

$('.list').on('mouseenter', 'li', function() {
  if(!$(this).hasClass('active')) {
    liEnter = $(this);
    liEnter.addClass('active');
  }
}).on('mouseleave', 'li', function() {
  if(liEnter !== false) {
    liEnter.removeClass('active');
    liEnter = false;
  }
}).on('click', 'li', function() {
  $(this).closest('.list').find('li.active').removeClass('active');
  $(this).addClass('active');
  liEnter = false;
});

li.active .orange-line {
  width: 200px;
  height: 20px;
  background-color: orange;
  display: inline-block;
}

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

<ul class="list">
  <li class="first active">
    Lorem ipsum dolor sit amet.
    <span class="orange-line"></span>
  </li>

  <li class="second">
    Lorem ipsum dolor sit amet.
    <span class="orange-line"></span>
  </li>
  <li class="third">
    Lorem ipsum dolor sit amet.
    <span class="orange-line"></span>
  </li>
</ul>

БЛОГ НА HUSL

jquery active class

Ответы (1 шт):