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

【问题标题】：jQuery toggle/vertical slider effect with multiple Divs具有多个 Div 的 jQuery 切换/垂直滑块效果
【发布时间】：2022-02-05 04:01:05
【问题描述】：

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

页面上有 2 个按钮，例如 Button1 和 Button2。
有 2 个 Div，比如 Div1 和 Div2。
最初两个 Div 都是隐藏的，只有 2 个按钮可见。
如果单击 Button1，则 Div1 应向下切换，反之亦然。
如果 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;
 });  
});

【问题讨论】：

我正在寻找类似的东西，但有多个 Div。 web-kreation.com/index.php/tutorials/…

标签： jquery toggle effect

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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');
});

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

【讨论】：

【解决方案4】：

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

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

【讨论】：