javascript - 为什么 jquery 脚本会更改一些 css 样式？

问题描述

它的外观：带有下拉菜单的页面按钮应该以悬停效果打开。将鼠标悬停在“页面”按钮上，将出现下拉菜单，该按钮应为深色背景，与其他按钮“产品”和“博客”完全相同（这两个按钮在任何情况下都可以正常工作）。当您在下拉菜单中选择某些内容时，“页面”按钮仍然具有相同的样式（像悬停期间的最后两个按钮一样的深色背景）。只有当光标离开下拉菜单或按钮时，下拉菜单才会消失，“页面”按钮应该是白色背景。

上面的文字描述了按钮应该如何与 JavaScript 代码一起工作。JS 代码有悬停效果，但是样式有问题。

现在使用 JS 代码“页面”按钮（当光标位于此按钮和下拉菜单上时）看起来像带有白色背景的活动按钮“主页”。我们需要解决这个问题并使按钮像上面的描述一样。

请查看 JSFiddle 以了解我在说什么。

如果你发现一些错误，对不起我的英语:)

jsfiddle

HTML

<div class="menu">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active uppercase" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle uppercase  outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                aria-expanded="false">Pages</a>
            <div class="dropdown-menu dropdown-menu-right">
                <div class="wrapperForDropdomnUpArrow">
                    <div class="dropdownUpArrow">
                    </div>
                </div>
                <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
                <a class="dropdown-item uppercase" href="#">Company</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link uppercase outline" href="#">Product</a>
        </li>
        <li class="nav-item">
            <a class="nav-link uppercase outline" href="#">Blog</a>
        </li>
    </ul>
</div>

CSS

.menu a:hover {
    color: #fff;
    background: #000;
    border-radius: 3px;
    transition: 0.4s;
}

.menu a {
    font-size: 12px;
    font-family: montserrat;
    color: #afb0b1;
    text-align: center;
    padding: 16px 19px;
    line-height: 12px;
    margin: 0px -5px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #f3f6f9;
    color: #000;
}

.dropdown-menu {
    background-color: #000;
    padding: 0px;
    border: 0;
    margin: 1px 0px 0px 0px;
}

.dropdown-menu a {
    text-align: left;
    padding: 12.5px 69px 12.5px 22px;
    line-height: 12px;
    margin: 0;
}

.dropdown-menu .aboutUs {
    text-align: left;
    padding: 20px 69px 12.5px 22px;
    line-height: 12px;
}

.dropdown-menu .FAQ {
    text-align: left;
    padding: 12.5px 69px 20px 22px;
    line-height: 12px;
}

a.nav-link.dropdown-toggle:focus {
    color: #fff;
    background: #000;
    border-radius: 3px;
}

jQuery

$(".dropdown-menu").css('margin-top', 0);
$(".dropdown")
    .mouseover(function () {
        $(this).addClass('show').attr('aria-expanded', "true");
        $(this).find('.dropdown-menu').addClass('show');
    })
    .mouseout(function () {
        $(this).removeClass('show').attr('aria-expanded', "false");
        $(this).find('.dropdown-menu').removeClass('show');
    });

我还发现删除这条线

    $( this ).addClass('show').attr('aria-expanded',"true");

做一些改变，但删除这条线并不是完整的解决方案

前。我们需要修理它

后

标签： javascriptjqueryhtmlcsstwitter-bootstrap

javascript - 为什么 jquery 脚本会更改一些 css 样式？

问题描述

解决方案

推荐阅读