突出顯示一個列表項，而不突出顯示它的孩子（另一個UL）在jQuery

我試圖將一個懸停效果應用於UL，但UL是一個列表項的子項目也得到了效果，不想要。我嘗試了各種各樣的東西，例如使用> sign和.not（）選擇器，但沒有成功。突出顯示一個列表項，而不突出顯示它的孩子（另一個UL）在jQuery

這是我（簡化）HTML：

 <ul id="menu"> 
      <li class="menubox"><a href="#">Home</a></li> 
      <li class="menubox"><a href="#">Over Ons</a></li> 
      <li class="menubox"><a href="#" id="varianten">Producten</a> 
       <ul id="menu_varianten"> 
        <li><a href="#">1</a></li> 
        <li><a href="#">2</a></li> 
        <li><a href="#">3</a></li> 
       </ul> 
      </li> 
      <li class="menubox"><a href="#">Forum</a></li> 
     </ul>

CSS，可能是相關的一些片段：

#menu { 
position: relative; 
width: 250px; 
} 

ul#menu{ 
list-style: none; 
margin-left: 0; 
padding-left: 0; 
} 

ul#menu li a{ 
display: block; 
text-decoration: none; 
height: 40px; 
} 

#menu_varianten{ 
list-style: none; 
display: none; 
margin-left: 0; 
padding-left: 0; 
} 

ul#menu_varianten li a{ 
padding-left: 4em; 
height:30px; 
}

而這裏的jQuery的：

$("ul#menu > li").hover(
    function() { 
     $(this).stop(true, true).animate({fontSize:"1.4em"}, 150); 
    }, 
    function() { 
     $(this).stop(true, true).animate({fontSize:"1.0em"}, 150); 
    });

我也試過選擇器（「ul＃menu> li」）。not（「＃menu_varianten」），但它不起作用。有人有想法？

來源

2011-02-17 Galaxy Surfer

沃特，你應該去jsfiddle.net，把你的HTML/CSS/JS在適當的窗格，然後我們可以看到一個現場演示。非常酷的網站！ – MrBoJangles

謝謝MrBoJangles，我聽說過該網站，但從未嘗試過。感謝這裏的所有解決方案，我一定會在下次試用之前嘗試它，並在將來的問題中使用它。 –

您可以嘗試只展開第一個錨點。

留下你的HTML和CSS，因爲它們並更改JavaScript來：

$("ul#menu li").hover(

function() { 
    $(this).find('a').first().stop(true, true).animate({ 
     fontSize: "1.4em" 
    }, 150); 
}, function() { 
    $(this).find('a').first().stop(true, true).animate({ 
     fontSize: "1.0em" 
    }, 150); 
});

http://jsfiddle.net/RCtFU/1/

來源

2011-02-17 17:04:02 Gazler

+1，這樣可以讓父菜單項放大，這是一個不錯的獎勵。 – eykanal

這是一個很好的解決方案，但請在此處發佈解決方案的內容，而不是僅在其他網站上發佈。 – user113716

@eykanal，謝謝。你的解決方案使用：不使用更少的選擇器，我相信它不使用.find（），但我認爲父母應該保持放大。 – Gazler

你可能想讓每個父母的每個子菜單爲兄弟姐妹。 CSS繼承，所以這將是一個非常簡單的迴避問題。

例子：http://jsfiddle.net/RCtFU/

<li class="menubox"> 
    <a href="#" id="varianten">Producten</a> 
</li> 
<li class="menubox"> <!-- probably want to change the class --> 
    <ul id="menu_varianten"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
    </ul> 
</li>

你需要做一些進一步的調整（不同類等）菜單和子菜單之間進行區分。

來源

2011-02-17 17:00:01 user113716

感謝您的建議帕特里克。我認爲你的解決方案有一個缺點，就是所有子菜單項一起被看作父列表中的一個大列表項（如jsFiddle所示）。要繞過這個，你需要更多的代碼，所以我想我會去Gazler的答案。但再次感謝。 –

您可以使用CSS3選擇器:not()：

$("ul#menu > li :not(ul)").hover(
function() { 
    $(this).stop(true, true).animate({ 
     fontSize: "1.4em" 
    }, 150); 
}, function() { 
    $(this).stop(true, true).animate({ 
     fontSize: "1.0em" 
    }, 150); 
});

見jsFiddle。

來源

2011-02-17 17:03:55 eykanal

感謝您使用：not（）選擇器的快速反應和建議，但是我的子菜單仍然在使用jsFiddle進行動畫製作。 –

突出顯示一個列表項，而不突出顯示它的孩子（另一個UL）在jQuery

回答

相關問題