Помощь в сокращении кода
Доброй ночи всем =)
Делалось по примеру на один блок, но теперь понадобилось несколько блоков на одной странице. Можно ли как то сократить данный код и возможно ли унифицировать окончания -1 -2 -3 в бесконечность ??? $(window).load(function(){ $(document).ready(function(){ $('#block-price-1').on('click',function(){ if($(this).data('click')==0){ $('#block-price-1 .hide-block').css('max-height','0'); $(this).data('click','1'); } else{ $('#block-price-1 .hide-block').css('max-height','700px'); $(this).data('click','0'); } }); }); }); $(window).load(function(){ $(document).ready(function(){ $('#block-price-2').on('click',function(){ if($(this).data('click')==0){ $('#block-price-2 .hide-block').css('max-height','0'); $(this).data('click','1'); } else{ $('#block-price-2 .hide-block').css('max-height','700px'); $(this).data('click','0'); } }); }); }); $(window).load(function(){ $(document).ready(function(){ $('#block-price-3').on('click',function(){ if($(this).data('click')==0){ $('#block-price-3 .hide-block').css('max-height','0'); $(this).data('click','1'); } else{ $('#block-price-3 .hide-block').css('max-height','700px'); $(this).data('click','0'); } }); }); }); $(window).load(function(){ $(document).ready(function(){ $('#block-price-4').on('click',function(){ if($(this).data('click')==0){ $('#block-price-4 .hide-block').css('max-height','0'); $(this).data('click','1'); } else{ $('#block-price-4 .hide-block').css('max-height','700px'); $(this).data('click','0'); } }); }); }); |
Цитата:
$(document).ready(function() { установка обработчиков }) или $(function() { установка обработчиков }) $(function() { var o = $('[id|=block-price]').on('click',function(){ var d = +o.data('click') ^ 1; //смотря что за data, если атрибут data-click, то +, иначе не надо и по умолчанию устновить надоть o.find('.hide-block').css({maxHeight, 700 * d}) .end() //к родителю .data({click: d}); //смотря что за data, если атрибут data-click, то так его нельзя заменить }).data({click: 0}); //если речь не об атрибуте, устанавливаем значение по умолчанию }); Случайно не о "развернуть" речь, может быть этого достаточно будет? |
Попробовал, не работает, у меня несколько элементов на странице + есть элемент с другими параметрами для меню (разворачивается в бок). В JS не силен, нашел код и чуток допилил его под свои нужны на сколько хватило знаний, поэтому для нескольких элементов продублировал код. Когда удалил $(window).load(function(){ }); везде и оставил только один, то так же все перестало работать.
Вот полный код: <script type="text/javascript"> $(window).load(function(){ $(document).ready(function(){ $('#menu-ico').on('click',function(){ if($(this).data('click')==0){ $('#menu-ico').css('position','absolute'); $('#fixmenu').css('width','100%'); $(this).data('click','1'); } else{ $('#fixmenu').css('width','50px'); $('#menu-ico').css('position','relative'); $(this).data('click','0'); } }); }); }); $(window).load(function(){ $(document).ready(function(){ $('#block-price-1').on('click',function(){ if($(this).data('click')==0){ $('#block-price-1 .hide-block').css('max-height','0'); $(this).data('click','1'); } else{ $('#block-price-1 .hide-block').css('max-height','1000px'); $(this).data('click','0'); } }); }); }); $(window).load(function(){ $(document).ready(function(){ $('#block-price-2').on('click',function(){ if($(this).data('click')==0){ $('#block-price-2 .hide-block').css('max-height','0'); $(this).data('click','1'); } else{ $('#block-price-2 .hide-block').css('max-height','1000px'); $(this).data('click','0'); } }); }); }); $(window).load(function(){ $(document).ready(function(){ $('#block-price-3').on('click',function(){ if($(this).data('click')==0){ $('#block-price-3 .hide-block').css('max-height','0'); $(this).data('click','1'); } else{ $('#block-price-3 .hide-block').css('max-height','1000px'); $(this).data('click','0'); } }); }); }); $(window).load(function(){ $(document).ready(function(){ $('#block-price-4').on('click',function(){ if($(this).data('click')==0){ $('#block-price-4 .hide-block').css('max-height','0'); $(this).data('click','1'); } else{ $('#block-price-4 .hide-block').css('max-height','700px'); $(this).data('click','0'); } }); }); }); </script> |
Цитата:
|
laimas,
Возможно старый JQ $(document).ready(function(){ $('*[id^="block-price-"]').on('click',function(){ if($(this).data('click')==0){ $(this).find('.hide-block').css('max-height','0'); $(this).data('click','1'); } else{ $(this).find('.hide-block').css('max-height','700px'); $(this).data('click','0'); } }); |
jq версии 2.1.0 подключается
|
stem
HTML-код свой покажите вместо JS, вы что-то делаете не так, а уж с JS и подавно. |
Цитата:
|
Цитата:
Вот код фиксированного меню, которое свернуто изначально в кнопку и раскрывается на всю ширину (слева направо) при нажатии. <div id="fixmenu"><div class="sub-main-menu"><button id="menu-ico" data-click="0"></button>Тут пункты меню</div></div> Это код блоков: <div data-click="1" class="border-price-block" id="block-price-1"> Тут постоянно видимый контент <div class="hide-block"><hr> Тут скрытый контент, который разворачивается при нажатии на родительский блок (сверху вниз) </div> </div> |
stem,
Есть пробная Инет-страница с Вашей проблемой ? |
Часовой пояс GMT +3, время: 22:48. |