如何使用unnested标记创建菜单行为？

Question

我有一些输出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>

我无法更改标记，除非根据我所做的查询向跨区添加类（或ID）。现在每个跨度都有基于关系来定位元素的必要信息，但是我不能使用伪选择器来定位元素，例如：悬停以显示或隐藏元素，因为＆＃34;级联＆＃34; css原理这使我处于不那么熟悉的领域，即使用js或jQuery。

我已经应用了css类创建了以下小提琴。如果您滚动到CSS的底部，您将看到我创建的选择器，以切换目标元素的可见性。我发现的例子与这种情况并不相关。

The Fiddle

如何仅使用类/ ID根据父级的悬停状态切换此html列表的子级的可见性？

Answer 1

好的，要求是你无法改变HTML层次结构..我相信我已经为你找到了解决方案。虽然它像罪一样丑陋，但确实有效。基本上它的工作方式是，如果你将鼠标悬停在2级元素内，它将找到下一个3级元素，直到它遇到不同的2级元素。然后它会为这些元素添加.hovered类。这不是一个完美的解决方案，但我认为它确实很有效。您可以添加更多mouseout事件来进行润色，但这将帮助您入门。 https://jsfiddle.net/9pvbgy1j/5/

＆＃13;

＆＃13;

$('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');
 }
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;