jQuery эффект переключения / вертикальный слайдер с несколькими Div - PullRequest
Новая
       18

jQuery эффект переключения / вертикальный слайдер с несколькими Div

0 голосов
/ 02 декабря 2009

На самом деле, я новичок в jQuery и пишу пример страницы с функциями jQuery. На этой странице я использую функцию переключения. Пожалуйста, помогите мне получить желаемый эффект. Я пытаюсь получить это, но это не работает должным образом. Эффект, который я пытаюсь применить:

  1. На странице есть 2 кнопки, например, Button1 и Button2.
  2. Есть 2 Div, скажем, Div1 и Div2.
  3. Первоначально оба Div скрыты, и видны только 2 кнопки.
  4. Если кнопка 1 нажата, Div1 должен переключиться вниз и наоборот.
  5. Если Div1 находится в открытом состоянии и кнопка 2 нажата, 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;
 });  
});

Ответы [ 4 ]

0 голосов
/ 23 июля 2011

Предположим, у вас есть разметка, подобная этой: 

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

Есть множество способов сделать это - это зависит от вашей разметки!

0 голосов
/ 02 декабря 2009

SlideUp / SlideDown управляют видимостью, а не позиционированием. Используйте CSS или структуру документа для управления взаимным расположением двух DIV, когда они видны.

0 голосов
/ 02 декабря 2009

Это не проверено, но попробуйте что-то вроде этого 

<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>
0 голосов
/ 02 декабря 2009

Я также новичок, как и вы, в jquery, но, думаю, если бы вы использовали живую собственность, это бы вам помогло, например: 

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