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 that you have read and understand our privacy policy and code of conduct.

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