如何更改一个css类onclick？

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

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

将定位在头部上方和向下滑动（与CSS过渡），它会转化成新的类(.show)当用户点击该部门选项卡。任何想法如何退出这个功能？

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

感谢提前:)

来源

2013-05-17 Darren Place

你想使用jQuery适合动画吗？或者只是纯粹的CSS3？ –

什么工作最好:) –

给你纯粹的CSS3解决方案。 –

您可以混合使用jQuery（用于更改类）和CSS3（用于转换）。所以，你有你的CSS以及集，并确保将这些两个参数：在jQuery的部分

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

现在，我们只是用它来改变点击类。

$(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; 
    }); 
});

如果您正计划不同的子菜单，每个菜单项，就需要下一个将它们添加到nav > ul > li内<a href...>...</a>标签。示例代码将是：

<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-17 03:54:47

好吧，非常感谢你的时间:) –

欢迎！ :)看看它是否有效。 –

对不起，我是这么笨...但是这会创建一个完整的页面下拉菜单吗？所以当我点击它将是一个像宽度类：100％;高度300px;例如？ –

你必须在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-17 03:56:41 tonymx227

我建议看看'hover（）'如果考虑这个 – gillyspy

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

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

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

来源

2013-05-17 03:59:26

这会允许转换吗？ –

没有！一点也不！：P –

使用toggleClass（）

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

或slideToggle()

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

来源

2013-05-17 04:02:24 gillyspy

这可能会在此用例中产生不希望的效果！ –

请进一步解释@PraveenKumar – gillyspy

'toggleClass（）'说明如果用户或浏览器错误地设置了两次，比如同时“隐藏”和“显示”，请考虑效果。 –

如何更改一个css类onclick？

回答

相关问题