如何使用未標記的標記創建菜單行爲？

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>