Javascript-форум - Помощь в сокращении кода

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Помощь в сокращении кода (https://javascript.ru/forum/dom-window/57201-pomoshh-v-sokrashhenii-koda.html)

Помощь в сокращении кода

Доброй ночи всем =)
Делалось по примеру на один блок, но теперь понадобилось несколько блоков на одной странице.

Можно ли как то сократить данный код и возможно ли унифицировать окончания -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');
        }
        
    });
	});
	});

Цитата:

Сообщение от stem

$(window).load(function(){
$(document).ready(function(){

Это зачем такое и многократно повторяющееся?

$(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>

Цитата:

Сообщение от stem

Когда удалил $(window).load(function(){ }); везде и оставил только один, то так же все перестало работать.

Вы не понимаете что это такое, а посему и клонируете... Вместо этого кода лучше приведите html исходный, в котором и нужно установит обработчики, тогда и понятно станет чего у вас там не работает. А ваш JS... в общем так писать нельзя.

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 и подавно.

Цитата:

Сообщение от Deff

Возможно старый JQ

Старый это какой? Я не знаю jQ, который бы требовал поступать так как у вас написано. )

Цитата:

Сообщение от laimas (Сообщение 381681)

я об этом и написал что в 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,
Есть пробная Инет-страница с Вашей проблемой ?

Цитата:

Сообщение от stem

Тут скрытый контент, который разворачивается при нажатии на родительский блок (сверху вниз)

.css('max-height','700px'); - таким образом не раскрыть скрытого блока, это всего лишь задает правило - высота не более 700 рх.

<button id="menu-ico" data-click="0"></button> и $(this).data('click','0'); отличаются друг от друга как небо и земля.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
.hide-block {
    display: none;
    max-height: 1000px
}

.hide-block:last-child {
    max-height: 700px
}

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    $('.border-price-block').on('click', function() {
        var m = $(this).data('mode') ^ 1,
        o = $(this).data({mode:m}).find('.hide-block');
        m ? o.slideDown(400) : o.slideUp(400)
    }).data({mode:0})
});
</script>     
</head> 

<body>
<div class="border-price-block">
    Тут постоянно видимый контент
    <div class="hide-block"><hr>
        Тут скрытый контент, который разворачивается при нажатии на родительский блок (сверху вниз)
    </div>
</div>
<div class="border-price-block">
    Тут постоянно видимый контент
    <div class="hide-block"><hr>
        Тут скрытый контент, который разворачивается при нажатии на родительский блок (сверху вниз)
    </div>
</div>
<div class="border-price-block">
    Тут постоянно видимый контент
    <div class="hide-block"><hr>
        Тут скрытый контент, который разворачивается при нажатии на родительский блок (сверху вниз)
    </div>
</div>
</body> 
</html>

Deff,
Прикрепляю html файл с кусками кода.

laimas,
Спасибо! Сам бы не сделал. Спасибо (х3)