2013-06-19 2 views
0

Я работаю над jquery и javascript. Я использую кнопку раскрывающегося списка, которая будет находиться в правом верхнем углу контейнера.любой способ уменьшить область при нажатии кнопки спуска вниз

Итак, есть ли возможность сжимать контейнер или перемещаться влево всякий раз, когда кнопка сбрасывается при нажатии. и тот же самый стих.

У меня тоже есть fiddle, у которого есть один контейнер, который скользит слева направо и разворот. но я ищу решение, которое заставляет контейнер сжиматься или перемещается влево всякий раз, когда нажимается кнопка вниз. вот сценарий для него.

КОД:

 $('#sidebar').click(function(){ 
     $(this).animate({width:'100px'},{bottom : 100px}, 400); 
     $('#steam').animate({bottom : 100px},{width:'500px'}, 400); 

     }); 
     $('#steam').click(function(){ 
     $(this).animate({width:'100px'},{bottom : 100px}, 400); 
     $('#sidebar').animate({width:'500px'},{bottom : 100px}, 400); 
     }); 
+1

Не показывать раскрывающийся список –

+0

Извините, это обновленная скрипка http://jsfiddle.net/33rHZ/ –

ответ

1

попробовать решения ниже в Js скрипку ссылке. http://jsfiddle.net/3DpfJ/50/

[1]: http://jsfiddle.net/3DpfJ/50/ 
+0

Я обновил свою скрипку. но в этом есть небольшая проблема. поэтому всякий раз, когда я нажимаю кнопку раскрывающегося списка, контейнер сжимается. но он не восстанавливается до своего первоначального положения, когда сбрасывается вверх. вот моя обновленная скрипка с незначительными проблемами. http://jsfiddle.net/PWduv/ –

+0

@HkM - подтвердил мою ссылку jsfiddle. Я не понимал твоей необходимости. От ur link, 1) В css вы указали ширину как 49%. 2) Затем, In onclick, вы изменили значение до 45%. Таким образом, вы не написали никакого кода, чтобы восстановить свою позицию во время «dropdown onchange». – sathish

+0

Да, Сатиш. Большое спасибо. Я получил решение. вот моя скрипка http://jsfiddle.net/YrhF3/1/. –

0

http://jsfiddle.net/33rHZ/1/

Эта скрипка использует .change событие & я комментировал чек на if expanded, так как я не думаю, что вам это нужно. Но если вы это сделаете, просто удалите мои комментарии, и он должен работать нормально.

В итоге:

$(function() 
    { 
     $('#sidebar').change(function(){ 
      { 
      $('#sidebar').animate({width:'69%'}, 400); 
      $('#steam').animate({width:'29%'}, 400); 
      $('#sidebar').animate({width:'29%'}, 400); 
      $('#steam').animate({width:'69%'}, 400); 
      }  
     }); 
    }); 

Очень аккуратные.

Смежные вопросы