Question

我有一个导航栏。我想进行设置，以便当用户点击departments标签时，css div会向下滑动并显示一些内容。我想用2个伪类来设置它。例如

dropdown.hide，。dropdown.show“.dropdown.hide

将位于标题上方并向下滑动（使用css转换），当用户单击“部门”选项卡时，它将转换为新类(.show)。关于如何解决这个问题的任何想法？

这是我的current code。（原谅毛刺边缘）

提前致谢：）

Answer 1

您可以混合使用jQuery（用于更改类）和CSS3（用于转换）。所以，你已经设置了好的CSS，并确保你设置了这两个参数：

.dropdown.show {transition: all 2s ease;}
.dropdown.hide {transition: all 2s ease;}

现在对于jQuery部分，我们将使用它来更改点击类。

$(document).ready(function(){
    $("nav > ul > li > a").toggle(function(){
        $(this).next('.dropdown').removeClass("hide").addClass("show");
        return false;
    }, function(){
        $(this).next('.dropdown').removeClass("show").addClass("hide");
        return false;
    });
});

为此，您需要将.dropdown放在链接旁边。这将附加到click事件处理程序。如果您需要:hover，则可以使用以下代码：

$(document).ready(function(){
    $("nav > ul > li > a").toggle(function(){
        $(this).next('.dropdown').removeClass("hide").addClass("show");
        return false;
    }, function(){
        $(this).next('.dropdown').removeClass("show").addClass("hide");
        return false;
    });
});

如果您计划为每个菜单项设置不同的子菜单，则需要将它们添加到<a href...>...</a>内的nav > ul > li标记旁边。示例代码为：

<div class="wrapper">
    <nav>
        <ul>
            <li>
                <a href="#">Home</a>
                <div class="dropdown hide">
                    <!-- Dropdown Menu -->
                </div>
            </li>
        </ul>
    </nav>
</div>

在我看来，你不应该为同一个div使用两个类。不需要.hide和.show。相反，只有.hide是默认值并在.show！

之间切换

Answer 2

您必须在jQuery中使用Mouseover和Mouseout函数。我喜欢使用jQuery代替CSS来做这种事情......

$('nav').find('a').on('mouseover', function(){
    $('body').append('<div id="divNavBar">Some content</div>');
    $(this).addClass('YourClassName');
}).on('mouseout', function(){
    $('#divNavBar').remove();
    $(this).removeClass('YourClassName');
});

Answer 3

根据我对您的问题的理解，以下是我动态更改课程的解决方案。

$(".className").click(function() {
    $(this).addClass("NewClassName");
});

如果我错了，请纠正我.........

Answer 4

使用toggleClass（）

$('div').toggleClass('hide').toggleClass('show');

或slideToggle()

$('div').slideToggle(1000);

如何更改css类onclick？

4 个答案: