0

我在我的网站上加入了显示和隐藏功能单击此处-单击工作选项卡并与我们联系选项卡一件事我注意到隐藏隐藏的触发器div无法按我希望的方式工作。例如，当您单击工作选项卡时，单击联系我们选项卡上的工作隐藏 div 关闭，反之亦然。有谁知道我怎么能做到这一点。

这是我的 HTML：

 <ul class="nav-bar">
 <li><a class="show_hide" href="#">work</a></li>
 <li><a class="show_hide-2" href="#">contact us</a></li>
 </ul>

这是我的 JS

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
    $(".slidingDiv-2").hide();
    $(".slidingDiv").slideToggle();
       });


$(".slidingDiv-2").hide();
$(".show_hide-2").show();
$('.show_hide-2').click(function(){
$(".slidingDiv").hide();
$(".slidingDiv-2").slideToggle();
 });
 });

我还添加了 display:none; 到 show_hide 和 show_hide-2 但是当你加载网站时仍然有一个轻微的动画，有没有办法解决这个问题？

4

2 回答 2

2

将其更改为：

$('.show_hide').click(function(){
    $(".slidingDiv-2").hide();
    $(".slidingDiv").slideToggle();
});

和

$('.show_hide-2').click(function(){
    $(".slidingDiv").hide();
    $(".slidingDiv-2").slideToggle();
});

div您可以设置s的 CSS（或 HTML 中的内联）以在页面加载时在 Javascript 生效之前display:none;隐藏s。div

于 2012-11-12T11:38:27.263 回答
0

如果你有很多标签，你可以使用正则表达式：

$(document).ready(function(){

 $('[class^=slidingDiv]').hide();
 $('[class^=show_hide]').show();

 $('[class^=show_hide]').click(function(){
  $('[class^=slidingDiv]').hide();
  $(this).closest('[class^=slidingDiv]').slideToggle();
 });

});
于 2012-11-12T11:40:32.373 回答