javascript - 将事件类添加到 jquery 下拉菜单

Question

当子无序列表出现时，我试图将一个事件类添加到 jquery 下拉列表中的父列表项。 基本上悬停在子元素上，我想在父 li 上有一个事件类。

代码如下:

HTML

<ul id="Menu" class="Nav">
<li><a href="#">Home</a></li>
<li class="Dropdown"><a href="#">About Us</a> // WANT TO ADD CLASS HERE
    <ul>
        <li><a href="#">Perspex Story</a></li>
        <li><a href="#">What We Believe</a></li>
        <li><a href="#">Our Values</a></li>
        <li><a href="#">Product Qualities</a></li>
    </ul>
</li>
</ul>

jQuery

$(document).ready(function () {
    $('.Nav li').hover(
    function () {
        $('ul', this).stop().slideDown(300);
    },
    function () {
        $('ul', this).stop().slideUp(300);
    }
    );
    $('.Nav li:has(> ul)').addClass('HasChild');
});

CSS

    ul.Nav
   {
       margin:9px 0 0 0;
       padding:0;
       float:right;
   }

   ul.Nav li
   {
       display:inline-block;
       margin-right:-4px;
       list-style:none;
   }

   ul.Nav li a
   {
       text-decoration:none;
       text-transform:uppercase;
       color:#666666;
       font-size:12px;
       padding:8px 18px;
       display:block;
   }

   ul.Nav li.Selected a
   {
       color:#1ead34;
   }

   ul.Nav li a:hover
   {
       background-color:#1EAD34;
       color:#ffffff;
   }

   ul.Nav li.HasChild a:hover:after
   {
       color:#ffffff !important;
   }

   ul.Nav li:last-child a
   {
       padding-right:0;
   }

   ul.Nav li ul
   {
       display:none;
       position:absolute;
       margin:0;
       padding:0;
       z-index:100;
       background-color:#EBEBEB;
   }

   ul.Nav li ul li
   {
       display:block;
   }

   ul.Nav li ul li a
   {
       padding:8px 18px;
       display:block;
   }

   ul.Nav li.HasChild a:after
   {
       color: #666666;
       content: "v";
       font-size: 7px;
       left: 6px;
       position: relative;
       top: -2px;
   }

   ul.Nav li.HasChild a:hover:after, ul.Nav li.HasChild a.Selected:after
   {
       color:#1ead34;
   }

   ul.Nav li.HasChild ul li a:after
   {
       content:"";
   }

谢谢 :) 链接到 JSFiddle http://jsfiddle.net/JR9Rk/

Answer 1

您通过 jquery 成功添加了该类，但该类在您的 CSS 中不可用。先加这个。

.HasChild{
   background-color:#1EAD34;
   color:#ffffff;
}

然后像Fiddle这样改变你的js