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

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类的小提琴。如果你滚动到CSS的底部，你会看到我创建的选择器来切换目标元素的可见性。我发现的例子与这种情况不太相关。

The Fiddle

我如何可以切换这个网站列表的孩子的基础上只使用类/ IDS他们的父母的悬停状态的知名度？

Answer 1

好吧，要求是你不能改变HTML层次结构..我相信我已经为你提出了一个解决方案。虽然它很丑陋，但确实有效。基本上，它的工作方式是如果您将鼠标悬停在第2级元素内，它将找到下一个第3级元素，直到它遇到不同的第2级元素。然后它会为这些元素添加一个.hovered类。这不是一个完美的解决方案，但我认为它实际上工作得很好。你可以添加更多的鼠标事件来抛光它，但这会让你开始。 https://jsfiddle.net/9pvbgy1j/5/

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

 
$('li.second').hover(function(){ 
 
\t $('li.third').removeClass('hovered'); 
 
\t $(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(){ 
 
\t $('li.fourth').removeClass('hovered'); 
 
\t $(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 { 
 
\t margin: auto; 
 
\t padding: 10px; 
 
\t text-align: center; 
 
} 
 
.isotope-options li { 
 
\t display: inline; 
 
} 
 
.isotope-options li.first{ 
 
\t background: #1E90FF; 
 
\t border-radius: 5px; 
 
\t display: inline-block; 
 
\t padding: 5px 10px; 
 
\t -moz-transition: background-color .3s; 
 
\t -o-transition: background-color .3s; 
 
\t -webkit-transition: background-color .3s; 
 
\t transition: background-color .3s; 
 
\t margin: 0; 
 
} 
 
.isotope-options span { 
 
\t font-size: 15px; 
 
\t font-style: unset; 
 
\t background: #1E90FF; 
 
\t border-radius: 5px; 
 
\t padding: 5px 10px; 
 
\t -moz-transition: background-color .3s; 
 
\t -o-transition: background-color .3s; 
 
\t -webkit-transition: background-color .3s; 
 
\t transition: background-color .3s; 
 
} 
 
.isotope-options .level1 { 
 
\t background: #657E97; 
 
\t width: 75%; 
 
\t margin:auto; 
 
} 
 
.isotope-options .level2 { 
 
\t background: #1B3855; 
 
\t width: 25%; 
 
\t margin:auto; 
 
} 
 

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

 
/* Visibility Toggle Classes */ 
 

 
.level0 { 
 
\t display: block; 
 
} 
 
.level1.parent_0 { 
 
\t display: block; 
 
} 
 
.level2.parent_0 { 
 
\t display: block; 
 
} 
 
.level2.parent_1 { 
 
\t display: block; 
 
} 
 
.level1.parent_2 { 
 
\t display: block; 
 
} 
 
.level2.parent_2 { 
 
\t 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>