0

我有一个导航栏。我想设置它，以便当用户单击departments选项卡时，css div 将向下滑动并显示一些内容。我想用 2 个伪类来设置它。例如

dropdown.hide，.dropdown.show”。dropdown.hide

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

这是我当前的代码。（请原谅故障边缘）

提前致谢 ：）

4

4 回答 4

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, 放置在链接旁边。这将附加到单击事件处理程序。如果你想要它: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。A.hide并且.show不需要。相反，只需.hide默认并在.show!

于 2013-05-17T03:54:47.767 回答
0

您必须在 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');
});
于 2013-05-17T03:56:41.060 回答
0

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

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

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

于 2013-05-17T03:59:26.727 回答
0

使用toggleClass ()

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

或滑动切换（）

$('div').slideToggle(1000);
于 2013-05-17T04:02:24.230 回答