Question

实际上，我是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;
 });  
});

Answer 1

我也和jquery一样新，但我想如果你使用了不动产，它会对你有帮助，就像这样：

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

Answer 2

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

Answer 3

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

<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 4

假设你有类似的标记：

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

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

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

4 个答案: