javascript - 如何使用未嵌套标记创建菜单行为？

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)添加到 span 之外，我无法更改标记。现在每个跨度都有必要的信息来根据关系定位元素，但由于 css 的“级联”原则，我无法使用像 :hover 这样的伪选择器来显示或隐藏元素。这让我进入了不太熟悉的领域，即使用 js 或 jQuery。

我创建了以下应用了 CSS 类的 fiddle 。如果滚动到 css 的底部，您将看到我创建的用于切换目标元素可见性的选择器。我找到的例子与这个案例不太相关。

The Fiddle

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

Answer 1

好的，根据要求，您不能更改 HTML 层次结构。我相信我已经为您提出了解决方案。虽然它像罪恶一样丑陋，但它确实有效。基本上它的工作方式是，如果您将鼠标悬停在 2 级元素内，它将找到下一个 3 级元素，直到它碰到不同的 2 级元素。然后它将向这些元素添加一个 .hovered 类。这不是一个完美的解决方案，但我认为它实际上工作得很好。您可以添加更多的 mouseout 事件来完善它，但这会让您入门。 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>