Цитата:
|
dimas15,
Воткните Ваш код в теги [HTML][/HTML] Иначе плохо читаем! |
Deff,
В этом примере при закрытии одного сектора закрываются все. и ссылок активных много становится сразу...а так вроде все норм. |
// Когда страница полностью загружена
$(window).ready(function()
{
// запоминаем высоту и отступы каждого блока
$('#accordion > div').each(function()
{
$(this).data('height', $(this).height());
$(this).data('padding-top', $(this).css('padding-top'));
$(this).data('padding-bottom', $(this).css('padding-bottom'));
});
// Скрываем все секции кроме первой
$('#accordion > div:not(:first)').hide();
// Делаем первую секцию активной
$('#accordion h3:first, #accordion div:first').addClass('active');
// Если пользователь кликнул на секцию
$('#accordion > h3').click(function()
{
// Сбрасываем все секции
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('#accordion > div:visible').animate({height: 0, 'padding-top': 0, 'padding-bottom': 0}, 500, function() { $(this).hide() } );
}
else {
// Делаем активной на которую кликнули
$(this).addClass('active');
box = $(this).next().addClass('active');
$(box).animate(
{
height: $(box).data('height'),
'padding-top': $(box).data('padding-top'),
'padding-bottom': $(box).data('padding-bottom')
}, 500);
}
});
});
|
dimas15Вы сообщение 23 смотрели ?
Показать исходный код Выбросите всё - включая первый тег <body> и замените из поста 23 Просмотрите про скрипты - дабы ниже повтор не остался |
<html> <head> <title></title> <link href="base.css" rel="stylesheet" type="text/css" /> <link href="accordion.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="accordion.js"></script> </head> <body> <div id="wrap"> <div id="accordion"> <h3 class="head">Листогибочное оборудование</h3> <div class="big_blocks"> <div class="blocks_littles"> <p>Листогибочные прессы</p> <img src="../upload/test_metall/list_press.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/press_phe/">DENER MAKINA</a></li> <li>AMADA</li> </ul> </div> <div class="blocks_littles"> <p>Листогибочные машины</p> <img src="../upload/test_metall/listabgib_mash.jpg" alt="" width="100" height="137" /> <ul> <li>IMCAR</li> <li><a href="catalog/category/918/">HACO</a></li> <li><a href="catalog/category/bendmak/">BENDMAK</a></li> </ul> </div> <div class="blocks_littles"> <p>Листогибочный инструмент</p> <img src="../upload/test_metall/list_s_pov_balk.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/641/">ROLLERI</a></li> <li>EURAM</li> <li>EUROSTAMP</li> </ul> </div> <div class="blocks_littles"> <p>Листогибы с поворотной балкой</p> <img src="../upload/test_metall/s_pov_balk.jpg" alt="" width="100" height="137" /> <ul> <span>Ручные:</span><br /> <li><a href="catalog/category/listogiby_ruchnye/">AYSANMAK</a></li> <br /> <span>Электрические:</span><br /> <li><a href="catalog/category/jordi/">DENER MAKINA</a></li> </ul> </div> <div class="blocks_littles"> <p>Прoбивочный инструмент</p> <img src="../upload/test_metall/prib_instrum.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/634/">SU.CE</a></li> </ul> </div> </div> <h3 class="head">Металлорежущее оборудование</h3> <div class="big_blocks"> <div class="blocks_littles"> <p>Токарные станки</p> <img src="../upload/test_metall/tok_st.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/673/">СAMPRO</a></li> <li><a href="catalog/category/656/">TRENS</a></li> <li><a href="catalog/category/921/">MING YANG</a></li> <li>KAAST</li> </ul> </div> <div class="blocks_littles"> <p>Фрезерные станки</p> <img src="../upload/test_metall/tok_frez.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/673/">CAMPRO</a></li> <li>KAAST</li> </ul> </div> <div class="blocks_littles"> <p>Сверлильные и горизонтально-расточные станки</p> <img src="../upload/test_metall/_IMAC.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/915/">IMAC</a></li> <li>KAAST</li> <li>HELTOS</li> </ul> </div> <div class="blocks_littles"> <p>Ленточнопильные и дисковые станки</p> <img src="../upload/test_metall/lentochn_piln.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/lentochnopilnye_stanki_bekamak/">BEKAMAK</a></li> <li><a href="catalog/category/lentopilnye_stanki_klaeger/">KLAEGER</a></li> <li><a href="catalog/category/897/">SCOTCHMAN</a></li> </ul> </div> <div class="blocks_littles"> <p>Шлифовальное оборудование</p> <img src="../upload/test_metall/obor_shlif.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/624/">GECAM</a></li> <li><a href="catalog/category/629/">JACOB LOEWER</a></li> <li><a href="catalog/category/639/">VIBROCHIMICA</a></li> </ul> </div> <div class="blocks_littles"> <p>Резьбонарезные станки</p> <img src="../upload/test_metall/rezbonar_cbc.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/631/">CBC</a></li> </ul> </div> </div> <h3 class="head">Оборудование для резки и раскроя листа и трубы</h3> <div class="big_blocks"> <div class="blocks_littles"> <p>Гильотинные ножницы</p> <img src="../upload/test_metall/shearmaster-610.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/jordi/">DENER MAKINA</a></li> <li><a href="catalog/category/listogiby_ruchnye/">AYSANMAK</a></li> <li><a href="catalog/category/scotchman/">SCOTCHMAN</a></li> <li>AMADA</li> </ul> </div> <div class="blocks_littles"> <p>Портальные машины плазменной резки</p> <img src="../upload/test_metall/plaz_rezka1.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/916/">DENER MAKINA</a></li> <li><a href="catalog/category/service-soitaab/">SOITAAB</a></li> <li><a href="catalog/category/918/">HACO</a></li> <li>AMADA</li> </ul> </div> <div class="blocks_littles"> <p>Портальные машины лазерной резки</p> <img src="../upload/test_metall/laz_rezk.jpg" alt="" width="100" height="137" /> <ul> <li>AMADA</li> </ul> </div> <div class="blocks_littles"> <p>Пресс-ножницы</p> <img src="../upload/test_metall/01met.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/scotchman/">SCOTCHMAN</a></li> </ul> </div> <div class="blocks_littles"> <p>Координатно-пробивочные прессы</p> <img src="../upload/test_metall/koord_prib_presu.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/635/">TAILIFT</a></li> <li>AMADA</li> </ul> </div> <div class="blocks_littles"> <p>Угловысечные прессы</p> <img src="../upload/test_metall/ygl_vus_st.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/648/">GECAM</a></li> <li><a href="catalog/category/jordi/">DENER MAKINA</a></li> </ul> </div> </div> <h3 class="head">Оборудование для гибки труб и профилей</h3> <div class="big_blocks"> <div class="blocks_littles"> <p>Профилегибы</p> <img src="../upload/test_metall/profel.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/profilegiby-comac/">СOMAC</a></li> <li><a href="catalog/category/bendmak/">BENDMAK</a></li> <li><a href="catalog/category/651/">THOMAN</a></li> </ul> </div> <div class="blocks_littles"> <p>Трубогибы</p> <img src="../upload/test_metall/trubogibu.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/630/">CBC</a></li> <li><a href="catalog/category/651/">THOMAN</a></li> </ul> </div> </div> <h3 class="head">Сварочное оборудование</h3> <div class="big_blocks"> <div class="blocks_littles"> <p>Дуговая сварка</p> <img src="../upload/test_metall/dyg.jpg" alt="" width="100" height="137" /> <ul> <span><a href="catalog/category/dugovaya-svarka/">Migatronic</a>:</span><br /> <li><a href="catalog/category/ruchnaya-dugovaya-svarka/">Ручная</a></li> <li><a href="catalog/category/poluavtomaticheskaya-svarka/">Полуавтомат</a></li> <li><a href="catalog/category/argonodugovaya-svarka/">Аргон</a></li> <li><a href="catalog/category/plazmennaya-svarka/">Плазма</a></li> </ul> </div> <div class="blocks_littles"> <p>Контактная сварка</p> <img src="../upload/test_metall/contact_svar.jpg" alt="" width="100" height="137" /> <ul> <li><a href="category/kontaktnaya-svarka/">DALEX</a></li> </ul> </div> <div class="blocks_littles"> <p>Плазменная резка</p> <img src="../upload/test_metall/plaz_rezka.jpg" alt="" width="100" height="137" /> <ul> <li><a href="catalog/category/plazmennaya-rezka/">MIGATRONIC</a></li> </ul> </div> </div> </div> <br /> </div> </body> </html> |
Deff,
Вроде сделал так как вы сказали:write: |
Deff,
23 сообщение смотрел |
dimas15,
А скрипт то ? Он должен стоять следом за <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="accordion.js"></script> (Или вы его засунули в accordion.js ? |
Deff,
вы можете свой вариант скинуть http://hostjs-mybb2011.narod.ru/dimas15.htm на почту k0ratei@mail.ru премного благодарен |
| Часовой пояс GMT +3, время: 04:30. |