Вопрос:

Как я могу создать поведение меню, используя невестированную разметку?

javascript jquery css

64 просмотра

1 ответ

551 Репутация автора

У меня есть выходной HTML, который должен быть оформлен в виде меню.

<ul>
  <li>
    <a>All</a>
  </li>
  <li>
    <a>
      <span class="level0">Clothing</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level1 parent_0">Shirts</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_0">Tee</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_0">Polo</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_0">Jersey</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_0">Dress</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level1 parent_0">Hats</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_1">Beanie</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_1">Flexfit</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_1">Snapback</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_1">Strapback</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_1">Visor</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level0">Accessories</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level1 parent_2">Swag</span>
    </a>
  </li>
  <li>
    <a>
      <span class="level2 parent_2">Drink Cozy</span>
    </a>
  </li>
</ul>

Я не могу изменить разметку, кроме как добавить классы (или идентификаторы) к диапазонам на основе запроса, который я сделал. Теперь каждый диапазон имеет необходимую информацию для нацеливания элементов на основе отношений, но я не могу нацеливать элементы с помощью псевдо-селекторов, таких как: hover, чтобы показать или скрыть элементы из-за «каскадного» принципа css. Это ставит меня в менее знакомую область, которая должна использовать js или jQuery.

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

Скрипка

Как я могу переключать видимость дочерних элементов этого html-списка в зависимости от состояния наведения их родителей, используя только классы / идентификаторы?

Автор: dimmech Источник Размещён: 22.08.2016 08:27

Ответы (1)


1 плюс

2193 Репутация автора

Хорошо, с учетом требований вы не можете изменить иерархию HTML. Я думаю, что нашел решение для вас. Хотя это безобразно как грех, оно работает. По сути, это работает так: если вы наведете курсор на элемент уровня 2, он найдет элементы следующего уровня 3, пока не достигнет другого элемента уровня 2. Затем он добавит .hoveredкласс к этим элементам. Это не идеальное решение, но я думаю, что оно действительно работает довольно хорошо. Вы можете добавить больше событий мыши, чтобы отшлифовать его, но это поможет вам начать. https://jsfiddle.net/9pvbgy1j/5/

$('li.first').hover(function(){
	$(this).siblings('li.second').addClass('hovered');
}, function(e){
 if(!$(e.relatedTarget).is('span.level0')) {
  $(this).siblings('li.second').removeClass('hovered');
 }
})

$('li.second').hover(function(){
	$('li.third').removeClass('hovered');
	$(this).nextUntil('li.second','li.third').addClass('hovered');
}, function(e){
 if(!$(e.relatedTarget).is('span.level1')) {
  $(this).siblings('li.third').removeClass('hovered');
 }
})

$('li.third').hover(function(){
	$('li.fourth').removeClass('hovered');
	$(this).nextUntil('li.third').addClass('hovered');
}, function(e){
 if(!$(e.relatedTarget).is('span.level2')) {
  $(this).siblings('li.fourth').removeClass('hovered');
 }
})
.isotope-options {
  border: 1px solid #999;
  border-radius: 5px;
  margin: 0 auto;
  padding: 20px;
  width: 500px;
}

.isotope-options a,
.isotope-options a:link,
.isotope-options a:visited,
.isotope-options a:hover {
  color: #fff;
  text-decoration: none;
}

.isotope-options {
	margin: auto;
	padding: 10px;
	text-align: center;
}
.isotope-options li {
	display: inline;
}
.isotope-options li.first{
	background: #1E90FF;
	border-radius: 5px;
	display: inline-block;
	padding: 5px 10px;
	-moz-transition: background-color .3s;
	-o-transition: background-color .3s;
	-webkit-transition: background-color .3s;
	transition: background-color .3s;
	margin: 0;
}
.isotope-options span {
	font-size: 15px;
	font-style: unset;
	background: #1E90FF;
	border-radius: 5px;
	padding: 5px 10px;
	-moz-transition: background-color .3s;
	-o-transition: background-color .3s;
	-webkit-transition: background-color .3s;
	transition: background-color .3s;
}
.isotope-options .level1 {
	background: #657E97;
	width: 75%;
	margin:auto;
}
.isotope-options .level2 {
	background: #1B3855;
	width: 25%;
	margin:auto;
}

.isotope-options span:hover {
  background: #ADD8E6;
  color: #555;
}

/* Visibility Toggle Classes */

.level0 {
	display: block;
}
.level1.parent_0 {
	display: block;
}
.level2.parent_0 {
	display: block;
}
.level2.parent_1 {
	display: block;
}
.level1.parent_2 {
	display: block;
}
.level2.parent_2 {
	display: block;
}


li.second {
  display: block;
    height: 0px;
    overflow: hidden;
}

li.third {
  display: block;
    height: 0px;
        overflow: hidden;
}

li.fourth {
  display: block;
    height: 0px;
        overflow: hidden;
}

li.hovered {
  height: 1.75em;
}

li{
  transition: height .5s ease;
  transition-delay: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="isotope-options clearfix" data-filter-group="unnamed_filter">
      <li class="first"><a href="#filter" class="filterbutton" data-filter="">All</a></li>
      <li class="second">
        <a href="#filter" class="filterbutton" data-filter=".clothing">
          <span class="level0">Clothing</span>
        </a>
      </li>
      <li class="third">
        <a href="#filter" class="filterbutton" data-filter=".shirts">
          <span class="level1 parent_0">Shirts</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".tee">
          <span class="level2 parent_0">Tee</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".polo">
          <span class="level2 parent_0">Polo</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".jersey">
          <span class="level2 parent_0">Jersey</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".dress">
          <span class="level2 parent_0">Dress</span>
        </a>
      </li>
      <li class="third">
        <a href="#filter" class="filterbutton" data-filter=".hats">
          <span class="level1 parent_0">Hats</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".visor">
          <span class="level2 parent_1">Beanie</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".strapback">
          <span class="level2 parent_1">Flexfit</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".snapback">
          <span class="level2 parent_1">Snapback</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".flexfit">
          <span class="level2 parent_1">Strapback</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".beanie">
          <span class="level2 parent_1">Visor</span>
        </a>
      </li>
      <li class="second">
        <a href="#filter" class="filterbutton" data-filter=".clothing">
          <span class="level0">Clothing</span>
        </a>
      </li>
      <li class="third">
        <a href="#filter" class="filterbutton" data-filter=".shirts">
          <span class="level1 parent_0">Shirts</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".tee">
          <span class="level2 parent_0">Tee</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".polo">
          <span class="level2 parent_0">Polo</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".jersey">
          <span class="level2 parent_0">Jersey</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".dress">
          <span class="level2 parent_0">Dress</span>
        </a>
      </li>
      <li class="third">
        <a href="#filter" class="filterbutton" data-filter=".hats">
          <span class="level1 parent_0">Hats</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".visor">
          <span class="level2 parent_1">Beanie</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".strapback">
          <span class="level2 parent_1">Flexfit</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".snapback">
          <span class="level2 parent_1">Snapback</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".flexfit">
          <span class="level2 parent_1">Strapback</span>
        </a>
      </li>
      <li class="fourth">
        <a href="#filter" class="filterbutton" data-filter=".beanie">
          <span class="level2 parent_1">Visor</span>
        </a>
      </li>
    </ul>

Автор: Pat Размещён: 22.08.2016 08:50
Вопросы из категории :
32x32