显示另一个div时隐藏div

Question

我有4个div，其中两个显示在单击（链接）上，并以相同方式隐藏。当我点击其他2个div的链接时，前两个应该再次隐藏，反之亦然。现在，如果点击2个链接，所有4个div将被显示。

简单：点击链接> show div;点击第二个链接>显示第二个div同时隐藏拳头格

的2个链接：

<a class="show_hideAbout show_hideAboutArr" href="#" >About</a> 

<a class="show_hideContact show_hideContactArr" href="#" >Contact</a> 

第2周的div：

<div class="slidingDivAbout">Some Content</div> 
<div class="slidingDivAboutArr"> 
    <img src="img/dropdownarrow.png" width="24" height="12" alt=""> 
</div> 

其他2周的div：

<div class="slidingDivContact">Some Content</div> 
<div class="slidingDivContactArr"> 
    <img src="img/dropdownarrow.png" width="24" height="12" alt=""> 
</div> 

我的脚本：

$(document).ready(function() { 
    $(".slidingDivAbout").hide(); 
    $(".show_hideAbout").show(); 

    $('.show_hideAbout').click(function() { 
    $(".slidingDivAbout").slideToggle(350); 
    }); 

    $(".slidingDivAboutArr").hide(); 
    $(".show_hideAboutArr").show(); 

    $('.show_hideAboutArr').click(function() { 
    $(".slidingDivAboutArr").fadeToggle("fast", "linear"); 
    }); 
    $(".slidingDivContact").hide(); 
    $(".show_hideContact").show(); 

    $('.show_hideContact').click(function() { 
    $(".slidingDivContact").slideToggle(350); 
    }); 

    $(".slidingDivContactArr").hide(); 
    $(".show_hideContactArr").show(); 

    $('.show_hideContactArr').click(function() { 
    $(".slidingDivContactArr").fadeToggle("fast", "linear"); 
    }); 
});​ 

Answer 1

没有改变你的标记，你可以这样做：

$(document).ready(function() { 
    $(".slidingDivAbout, .slidingDivAboutArr, .slidingDivContact, .slidingDivContactArr").hide(0); 

    $('.show_hideAbout').click(function() { 
     $(".slidingDivContact").slideUp(300, function() { 
      $(".slidingDivContactArr").fadeOut(300, function() { 
       $(".slidingDivAbout").slideToggle(350, "linear", function() { 
        $(".slidingDivAboutArr").fadeToggle(350); 
       }); 
      }); 
     }); 
    }); 
    $('.show_hideContact').click(function() { 
     $(".slidingDivAbout").slideUp(300, function() { 
      $(".slidingDivAboutArr").fadeOut(300, function() { 
       $(".slidingDivContact").slideToggle(350, function() { 
        $(".slidingDivContactArr").fadeToggle(350, "linear"); 
       }); 
      }); 
     }); 
    }); 
}); 

Working Sample

Answer 2

也许尝试这样的事情？

<a class="show_hideAbout" href="#" >About</a> 
<a class="show_hideContact" href="#" >Contact</a> 

<div class="divAbout"> 
    <div class="slidingDivAbout">Some Content</div> 
    <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> 
</div> 

<div class="divContact"> 
    <div class="slidingDivContact">Some Content</div> 
    <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> 
</div> 

和JavaScript：

$(document).ready(function() { 

    $(".divAbout").hide(); 
    $(".divContact").hide(); 

    $('.show_hideAbout').click(function() { 
     if($(".divContact").is(":visible")) { 
      $(".divContact").slideToggle(350, 'linear', function(){ 
      $(".divAbout").slideToggle(350, 'linear'); 
      }); 
     } else { 
      $(".divAbout").slideToggle(350, 'linear'); 
     } 
    }); 

    $('.show_hideContact').click(function() { 
     if($(".divAbout").is(":visible")) { 
      $(".divAbout").slideToggle(350, 'linear', function(){ 
      $(".divContact").slideToggle(350, 'linear'); 
      }); 
     } else { 
      $(".divContact").slideToggle(350, 'linear'); 
     } 
    }); 

});​ 

Answer 3

为每个链接，你应该绑定点击一次。

<a class="show_hideAbout show_hideAboutArr" href="#" >About</a> 
<a class="show_hideContact show_hideContactArr" href="#" >Contact</a> 

以下两个是重复的，因为它们将点击绑定到同一个标记。 class =“show_hideAbout show_hideAboutArr”）

$('.show_hideAbout').click(function(){ 
     $(".slidingDivAbout").slideToggle(350); 
     }); 

$('.show_hideAboutArr').click(function(){ 
     $(".slidingDivAboutArr").fadeToggle("fast", "linear"); 
     }); 

只保留一个。和

$('.show_hideAbout').click(function(){ 
    $(".slidingDivAbout").slideToggle(350); 
    $(".slidingDivAboutArr").fadeToggle("fast", "linear"); 
}); 

Answer 4

我认为最好用CSS类而不是加载隐藏/显示方法。该HTML看起来是这样的：

<a class="showAbout" href="#" >About</a> 
<a class="showContact" href="#" >Contact</a> 
<div id='wrapper'> 
    <div class="about"> 
     <div class="slidingDivAbout">Some Content 1</div> 
     <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> 
    </div> 
    <div class="contact"> 
     <div class="slidingDivContact">Some Content 2</div> 
     <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> 
    </div> 
</div> 

有两个CSS规则：

#wrapper > div { 
    display: none; 
} 
​#wrapper > div.show { 
    display: block; 
}​ 

然后jQuery的：

$(function() { 

    $(document).on('click', '.showAbout', function() { 
     $('.about').siblings('div').removeClass('show').end().toggleClass('show'); 
    }); 

    $(document).on('click', '.showContact', function() { 
     $('.contact').siblings('div').removeClass('show').end().toggleClass('show'); 
    }); 

});​ 

Answer 5

我会在你的HTML标记使用自定义属性：

Here's a working demo

HTML：

<a class="slidingLink" slide="about" href="#" >About</a> 
<a class="slidingLink" slide="contact" href="#" >Contact</a> 

<div class="slidingContainer" id="about"> 
    <div>Some Content</div> 
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> 
</div> 
<div class="slidingContainer" id="contact"> 
    <div>Some Content</div> 
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> 
</div>​​​​​​​​​​​​​​​​ 

的JavaScript：

$(document).ready(function(){ 
    $('.slidingContainer').hide(); 
    $('.slidingLink').click(function() { 
     var toSlide = $(this).attr("slide"); 
     $("#"+toSlide).slideDown(350); 
     $('.slidingContainer').each(function() { 
      if ($(this).attr("id") != toSlide) { 
       $(this).slideUp(350); 
      } 
     }); 
    }); 
}); 

这绝对是通用的，因此，所有你需要做的添加新的链接被添加一个新的a标签与slide属性设置为的id与类slidingContainer的一个div。

Answer 6

您好我会做这样的jsfiddle例如

HTML

<a class="show_hideAbout" href="#" >About</a> 

<a class="show_hideContact" href="#" >Contact</a> 
<div class="slidingDivAbout">Some Content1</div> 
<div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> 
<div class="slidingDivContact">Some Content2</div> 
<div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>​ 

脚本

$(function(){ 

     $('.slidingDivAbout').hide(); 
     $('.slidingDivAboutArr').hide(); 
     $('.slidingDivContact').hide(); 
     $('.slidingDivContactArr').hide(); 

     $('.show_hideAbout').click(function() { 
      $('.slidingDivAbout').show(350); 
      $('.slidingDivAboutArr').show() 
      $('.slidingDivContact').hide(); 
      $('.slidingDivContactArr').hide(); 
     }); 

     $('.show_hideContact').click(function() {   
      $('.slidingDivContact').show(350); 
      $('.slidingDivContactArr').show('fast', 'linear'); 
      $('.slidingDivAbout').hide(); 
      $('.slidingDivAboutArr').hide(); 
     }); 
});