具有多个 Div 的 jQuery 切换/垂直滑块效果

Question

实际上，我是 jQuery 的新手，我正在使用 jQuery 函数编写一个示例页面。在此页面中，我使用切换功能。请帮助我达到预期的效果。我正在尝试获取它，但它无法正常工作。 我想要应用的效果是；

1. 页面上有 2 个按钮，即 Button1 和 Button2。
2. 有 2 个 Div，即 Div1 和 Div2。
3. 最初，两个 Div 都是隐藏的，只有 2 个按钮可见。
4. 如果单击 Button1，Div1 应该向下切换，反之亦然。
5. 如果 Div1 处于打开状态，并且单击 Button2，则 Div1 应该稍微上升，Div2 应该下降。

我写了一些应用了 CSS 的代码。但我没有得到滑动效果，因为它只提供了一个 Div。

我将 Javascript 写为：

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

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

Answer 2

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

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