javascript - Jquery 如果 hasClass 然后 addClass

Question

我知道我可以做到，我只是迷失在层次结构中，需要另一双眼睛来关注这个。

这是正在使用的结构:

<div class="nav-column">
    <ul>
        <li><a href="#">Link 01</a>
            <div>
                <ul>
                    <li><a href="#">Sublink 01</a></li>
                    <li><a href="#">Sublink 02</a></li>
                    <li><a href="#">Sublink 03</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Link 02</a></li>
        <li><a href="#">Link 03</a></li>
    </ul>
    <div class="home"><h3>Underlying Div</h3></div>
</div>

我希望执行以下操作:当您将鼠标悬停在 .nav-column ul li a 上时，div.home 的可见性将关闭。当然会有多个 .nav-columns，所以我将其动态化。

我现在拥有的 jQuery 是:

if ($('.nav-column li').hasClass('active')){
     $(this).parent('.nav-column').sibling('div.home').toggleClass("off");
}

不产生任何类添加到 div.home。我已经有一个悬停功能添加和删除类 '.active' 到 .nav-column li

---

编辑编辑编辑

---

我发现我的代码有误，实际上正确的代码是 div.home 在 div.nav-column 之外

这是正确的层次结构:

<div class="wrapper">
    <div class="nav-column">
        <ul>
            <li><a href="#">Link 01</a>
                <div>
                    <ul>
                        <li><a href="#">Sublink 01</a></li>
                        <li><a href="#">Sublink 02</a></li>
                        <li><a href="#">Sublink 03</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Link 02</a></li>
            <li><a href="#">Link 03</a></li>
        </ul>
    </div>
    <div class="home"><h3>Underlying Div</h3></div>
</div>

再一次……我很抱歉……你能感觉到我的理智水平在下降

Answer 1

想想这就是你想要的:

$('.nav-column li').each(function(){
    if($(this).hasClass('active')) {
        $(this).closest('.nav-column').siblings('div.home').toggleClass("off");
    } 
});

fiddle :

http://jsfiddle.net/Jf8mp/

你的错误:

.sibling('div.home') 错误，正确的方法名是.siblings()

如果条件不能确定谁是$(this)，你使用了一个函数作为.each()

更新:

让它在悬停在 .nav-column ul li a 上工作:

$('.nav-column li').on('mouseenter','a',function(){
    if($(this).closest('li').hasClass('active')) {
        $(this).closest('.nav-column').siblings('div.home').toggleClass("off");
    } 
});

fiddle :

http://jsfiddle.net/Jf8mp/2/