Question

我想为导航菜单制作一个javascript。当用户将鼠标悬停在<a class="HeaderCategoryLink" href="/aquarien">Aquarien</a>上时，<div onmouseover="SublistMouseenter()" class="sublist first-level"></div>元素应具有CSS类“header-menu-sublist-hover”。我尝试通过选择触发javascript的div的索引0然后将类添加到其中的兄弟来解决这个问题。调试时，该类未添加到链接中。

HTML：

<ul>    
    <li> <!--first navigation option-->        
        <a class="HeaderCategoryLink" href="/aquarien">Aquarien</a>
        <div class="sublist-toggle"></div>
        <div onmouseenter="SublistMouseenter()" class="sublist first-level">
            <ul class="sublistbox">
                <li>
                    <a href="/sets">Sets</a>
                    <div class="sublist-toggle"></div>
                </li>
                <li>
                    <a href="/nano">Nano</a>
                    <div class="sublist-toggle"></div>
                </li>
                <li>
                    <a href="/kombinationen">Kombinationen</a>
                    <div class="sublist-toggle"></div>
                </li>
                <li>
                    <a href="/becken">Becken</a>
                    <div class="sublist-toggle"></div>
                </li>
            </ul>
        </div>
    </li> 
    <li> <!--second navigation option-->      
        <a class="HeaderCategoryLink" href="/aquarien">Aquarien</a>
        <div class="sublist-toggle"></div>
        <div onmouseenter="SublistMouseenter()" class="sublist first-level">
            <ul class="sublistbox">
                <li>
                    <a href="/sets">Sets</a>
                    <div class="sublist-toggle"></div>
                </li>
                <li>
                    <a href="/nano">Nano</a>
                    <div class="sublist-toggle"></div>
                </li>
                <li>
                    <a href="/kombinationen">Kombinationen</a>
                    <div class="sublist-toggle"></div>
                </li>
                <li>
                    <a href="/becken">Becken</a>
                    <div class="sublist-toggle"></div>
                </li>
            </ul>
        </div>
    </li>
</ul>

javascipt的：

function SublistMouseenter()
{
    var CategoryLink = $(this).parentElement.eq(0);
    CategoryLink.addClass('header-menu-sublist-hover');
    $(this).mouseleave(function () {
        CategoryLink.removeClass('header-menu-sublist-hover');
    });
};

Answer 1

您可以在锚标记id并在div上调用此函数以在鼠标悬停时更改锚类名。

http://jsfiddle.net/58898k9z/17/

// for put requests
parse_str(file_get_contents("php://input"),$post_vars);
$username = $post_vars['username'];
echo "This is a PUT request";
echo "<br>";
echo $username;
echo "<br>";

Answer 2

你的代码有些问题。 parentElement不是jQuery函数，parent（）是。 eq（0）也不会选择第一个孩子。你可以改用find（）。

考虑到这一点，你的函数的第一行看起来更像是这样：

var CategoryLink = $(this).parent().find('a.HeaderCategoryLink');)

或

-g

Answer 3

嗨尽管答案已被接受，但你可以只用css来实现这一点，那么为什么你需要编写javascript代码，这里就是你只需要应用这个css行的例子

li .HeaderCategoryLink + .first-level{
    display : none;
}

li .HeaderCategoryLink:hover + .first-level{
    display : block;
}

这里是演示工作代码，你可以在这里查看

<强> Checkout

使用JavaScript更改1st兄弟的CSS类

3 个答案: