jquery - jQuery toggle/vertical slider effect with multiple Divs

Question

Actually, I am new to jQuery and I am writting a sample page with jQuery functions. In this page I am making use of toggle function. Please help me to get the intended effect. I am trying to get it but it is not working properly. The effect I am trying to apply is;

1. There are 2 buttons on the page, say Button1 and Button2.
2. There are 2 Divs, say Div1 and Div2.
3. Initially both Divs are hidden and only 2 buttons are visible.
4. If Button1 is clicked, Div1 should get toggle down and vice versa.
5. If Div1 is in open state and Button2 is clicked, Div1 should go up slightly and Div2 should fall down.

I have written some code with CSS applied on it. But I am not getting the sliding effect as it gives with only one Div.

I have written Javascript as;

var IsPanelDown = false;
var IsPanel2Down = false;

$(document).ready(function() {

 // Expand Panel
 $("#open").click(function(){
 if (IsPanel2Down == false)
 {
     $("div#panel2").slideUp("slow");
     IsPanel2Down = false; 
 }
  $("div#panel").slideDown("slow");
     IsPanelDown = true;
 }); 

 // Collapse Panel
 $("#close").click(function(){
  $("div#panel").slideUp("slow"); 
  IsPanelDown = false;
 });  

 // Switch buttons from "Log In | Register" to "Close Panel" on click
 $("#toggle a").click(function () {
  $("#toggle a").toggle();
 });  

  $("#toggle2 a").click(function () {
  $("#toggle2 a").toggle();
 });  

 $("#open1").click(function(){
 if(IsPanelDown == false)
 {

  $("div#panel").slideUp("slow"); 
  IsPanelDown = false;
 }
  $("div#panel2").slideDown("slow");
     IsPanel2Down = true;
 }); 

 // Collapse Panel
 $("#close1").click(function(){
  $("div#panel2").slideUp("slow"); 
  IsPanel2Down = false;
 });  
}); 

Answer 1

它没有经过测试，但尝试这样的事情

<div id="toggle_holder">
  <div class="toggle"></div>
  <div class="toggle"></div>
</div>
<div id="button_wrapper">
  <button>button 1</button>
  <button>button 2</button>
</div>
<script type="text/javascript">
  // jquery already loaded...
  $(document).ready(function(){
    $('#button_wrapper button').click(function(){
      $('button', $(this).parent()).slideUp('slow');
      $(this).stop().slideDown('slow');
    });
  });
</script>

Answer 2

SlideUp/SlideDown 控制可见性，而不是定位。使用 CSS 或文档结构来控制两个 DIV 可见时的相对位置。

Answer 3

假设您有与此类似的标记：

<button id="button1">Toggle Div1</button>
<button id="button2">Toggle Div2</button>

<div class="container" id="div1">Content in DIV 1</div>
<div class="container" id="div2">Content in DIV 2</div>

然后像这样使用jQuery：

$('button').click(function(e) {
  // get the ID of the button so we can work out which DIV to show
  var m = $(this),
      id = m.attr('id').replace('button', ''); // should be either "1" or "2" after this

  // hide the DIV that's visible, if any
  $('.container:visible').slideUp('fast');

  // slide the one we want down
  $('#div' + id).slideDown('fast');
});

有很多方法可以做到这一点——这有点取决于你的标记！

Answer 4

我对 jquery 也很陌生，但我想如果你使用 live property 它会对你有所帮助，就像这样：

$("#toggle a").live('click', function() { $(this).functionName(); });