javascript – Jquery如果hasClass然后addClass

我知道我可以做到这一点,我只是迷失在层次结构中,需要第二眼看到这一点.

这是我正在使用的结构:

<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上时,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.nav-div外的div.home

这是正确的层次结构:

<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>

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

最佳答案
认为这是你想要的:

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

小提琴:

http://jsfiddle.net/Jf8mp/

你的错误:

.sibling(‘div.home’)错误,方法的正确名称是.siblings()

如果条件不确定谁是$(this),则使用函数为.each()

更新:

使其悬停在.nav-column ul li上:

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

小提琴:

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

转载注明原文:javascript – Jquery如果hasClass然后addClass - 代码日志