2

Всем привет! Такая проблема, что не могу зафиксировать нижнее подчеркивание. На css сделал нижнее подчеркивание с помощью before. Все работает. Но мне нужно, чтоб при клике на этот элемент списка, подчеркивание фиксировалось.

.m-cat ul{
    padding: 0;
}
.m-cat li{
    padding: 10px 0;
    position: relative;
    cursor: pointer;
}
.m-cat li::before{
    content: "";
    height: 1.5px;
    background: #999;
    width: 0;
    position: absolute;
    bottom: 0;
    left:0;
    transition: .2s ease;
}
.m-cat li:hover::before{
    width: 100%;
}
<aside class="m-cat">
    <nav>
        <ul id="m-cat-ul">
            <li data-url="/">Все товары</li>
            <li>Электроника</li>
            <li>Дом</li>
            <li>Автотовары</li>
            <li>Спорт и развлечения</li>
        </ul>
    </nav>
</aside>

Я попробовал добавить класс с помощью js, к элементу списка, но выглядит не очень. Как уже при клике удалить прежние свойства? Код:

    let list = document.getElementById('m-cat-ul');
    list.addEventListener('click',(event)=>{
    	let item = event.target;
    	item.classList.add('m-cat-li__active');
    })
    .m-cat ul{
    	padding: 0;
    }
    .m-cat li{
    	padding: 10px 0;
    	position: relative;
    	cursor: pointer;
    }
    .m-cat li::before{
    	content: "";
    	height: 1.5px;
    	background: #999;
    	width: 0;
    	position: absolute;
    	bottom: 0;
    	left:0;
    	transition: .2s ease;
    }
    .m-cat li:hover::before{
    	width: 100%;
    }
    .m-cat-li__active{
    	border-bottom: 1.5px solid #999;
    }
<aside class="m-cat">
  <nav>
    <ul id="m-cat-ul">
    	<li data-url="/">Все товары</li>
    	<li>Электроника</li>
    	<li>Дом</li>
    	<li>Автотовары</li>
    	<li>Спорт и развлечения</li>
    </ul>
  </nav>
</aside>

5
  • а tabindex Вас устроит? 14 апр 2020 в 18:59
  • @StrangerintheQ Хм.. а без него получится?) 14 апр 2020 в 19:04
  • Либо js либо он 14 апр 2020 в 19:14
  • Выбираю js)))))) 14 апр 2020 в 19:18
  • Там Оптимус ответил=) 14 апр 2020 в 19:19

1 ответ 1

6

document.getElementById('m-cat-ul').addEventListener('click', function(e) {
  if( !e.target.matches('li') ) return;
  
  let active = this.querySelector('.m-cat-li__active');
  // this ссылается на объект, в контексте которого вызвана функция.
  // здесь, это 'm-cat-ul'

  if( active ) active.classList.remove('m-cat-li__active');
  
  e.target.classList.add('m-cat-li__active');
});
.m-cat ul {
  padding: 0;
}

.m-cat li {
  padding: 10px 0;
  position: relative;
  cursor: pointer;
}

.m-cat li::before {
  content: "";
  height: 1.5px;
  background: #999;
  width: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: .2s ease;
}

.m-cat li:not(.m-cat-li__active):hover::before {
  width: 100%;
}

.m-cat-li__active {
  border-bottom: 1.5px solid #999;
}
<aside class="m-cat">
  <nav>
    <ul id="m-cat-ul">
      <li data-url="/">Все товары</li>
      <li>Электроника</li>
      <li>Дом</li>
      <li>Автотовары</li>
      <li>Спорт и развлечения</li>
    </ul>
  </nav>
</aside>

P.s. а у стрелочных функций нет своего this) Поэтому не стоит везде их использовать. Они задуманы именно для коротеньких функций из одной-двух строчек.

6
  • Спасибо конечно, помогли в удаление свойства с предыдущего актива. Но я видимо не написал этого. После клика на элемент, у него появляется полоска,все правильно, но если навести на этот же элемент, то у него срабатывает еще раз hover. Как его отключить? 14 апр 2020 в 19:21
  • Про стрелочные функции верно подмечено!
    – MoloF
    14 апр 2020 в 19:22
  • @Евгений .m-cat li:hover::before.m-cat li:not(.m-cat-li__active):hover::before 14 апр 2020 в 19:24
  • @OPTIMUSPRIME Ого.. Можете в двух словах объяснить это?) .m-cat li:not(.m-cat-li__active):hover::before 14 апр 2020 в 19:27
  • 1
    @Евгений, «Внутри элемента .m-cat, все теги li у которых :нет(.m-cat-li__active) такого класса... применить стили при :hover наведении, к псевдоэлементу ::before» ) 14 апр 2020 в 19:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.