Question

我在我的网站上加入了展示和隐藏功能Click here - 点击工作标签并与我们联系标签 我注意到了一件事隐藏隐藏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然而，当你加载网站时仍然有一个轻微的动画，有没有办法解决这个问题？

Answer 1

将其更改为：

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

和

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

您可以将div的CSS（或HTML内联）设置为display:none;，以便在页面加载时Javascript生效前隐藏div。< / p>

Answer 2

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

$(document).ready(function(){

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

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

});

多个显示和隐藏和关闭触发器

2 个答案: