• Курсы Академии Кодебай, стартующие в мае - июне, от команды The Codeby

    1. Цифровая криминалистика и реагирование на инциденты
    2. ОС Linux (DFIR) Старт: 16 мая
    3. Анализ фишинговых атак Старт: 16 мая Устройства для тестирования на проникновение Старт: 16 мая

    Скидки до 10%

    Полный список ближайших курсов ...

Jquery проблемы с браузерами

  • Автор темы teclis
  • Дата начала
T

teclis

Задача была сделать раскрывающийся список для компонента "каталог" на CMS 1C-Bitrix. Но возникли проблемы в разных браузерах. в Google Chrome вс работает как часы, однако в опере и эксплорере начинается "кеся-меся".
В опере и эксплорере "плюсики" (<span>+</span>) съезжают не просто вправо ( в css: span { float: right; .....} а ещё немного ниже и несоответствуют в итоге своему разделу.
А в експлорере ещё и глюки видимо с jQuery. Вместо того, чтобы раскрывать свёрнутый список при клике скрывается название раздела :shock:.
Прошу помощи... HELP! HELP! HELP!

------------------------------------------------------------------------------------------------------------------------------------
Список генерируется php
вот код
------------------------------------------------------------------------------------------------------------------------------------
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<link href="style.css" rel="stylesheet" type="text/css" />
<div class="box">
<h3>Каталог<span class="expand">+</span></h3>
<div class="catalog-section-list">
<ul class='cat_group'>
<?
$CURRENT_DEPTH=$arResult["SECTION"]["DEPTH_LEVEL"]+1;
foreach($arResult["SECTIONS"] as $arSection):
if($CURRENT_DEPTH<$arSection["DEPTH_LEVEL"])
echo "<ul class='cat_razdel'>";
elseif($CURRENT_DEPTH>$arSection["DEPTH_LEVEL"])
echo str_repeat("</ul>", $CURRENT_DEPTH - $arSection["DEPTH_LEVEL"]);
$CURRENT_DEPTH = $arSection["DEPTH_LEVEL"];
?>
<li><a href="<?=$arSection["SECTION_PAGE_URL"]?>"><?=$arSection["NAME"]?></a>
<? if ($CURRENT_DEPTH ==1)
{
echo "<span>+</span>";
}

?>
</li>
<?endforeach?>
</ul>
</div>
</div>

------------------------------------------------------------------------------------------------------------------------------------
в шаблон страницы вписан jQuery код и добавляется список сгенерированный php:
------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$("ul.cat_group").click(function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("ul.cat_razdel").hide();
$("ul.cat_group li").click(function(){
$(this).parent().next().slideToggle();
});
$("ul.cat_group li span").click(function(){
$(this).parent().next().slideToggle();
});
$("h3 span").click(function(){
$(this).parent().next().slideToggle();
});
});
</script>


<title>Без названия</title>
</head>
<body>

<div class="catalog-section-list">
<div class="box">
<h3>Каталог<span>+</span></h3>

<ul class='cat_group'>


<li><a href="/e-store/index.php?SECTION_ID=3957">"Видеонаблюдение"</a><span>+</span></li>



<ul class='cat_razdel'><li><a href="/e-store/index.php?SECTION_ID=3958">BEWARD</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3965">Объективы</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3977">ЗАЩИТНЫЕ КОЖУХИ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3979">КРОНШТЕЙНЫ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3981">Устройства инфракрасной подсветки</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3982">Микрофоны</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3983">Видеокамеры</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4004">Мониторы</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4011">Устройства обработки видеосигнала</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4022">Домофоны</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4030">Видеорегистраторы</a></li>
</ul>

<li><a href="/e-store/index.php?SECTION_ID=4138">"Охранно-пожарная сигнализация"</a><span>+</span></li>



<ul class='cat_razdel'><li><a href="/e-store/index.php?SECTION_ID=4139">Программное обеспечение</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4140">Расходные материалы</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4141">Устройства коммутации</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4142">Дозвонщики</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4143">Пульт управления</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4144">ПРИЕМНО-КОНТРОЛЬНЫЕ ПАНЕЛИ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4145">Светосигнальные устройства, сирены, оповещатели</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4146">Извещатели</a></li>
</ul>

<li><a href="/e-store/index.php?SECTION_ID=4088">"Контроль доступа"</a><span>+</span></li>



<ul class='cat_razdel'><li><a href="/e-store/index.php?SECTION_ID=4089">Контроллеры СКД</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4090">Элекрозамки и защелки</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4091">ТУРНИКЕТЫ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4095">Считывающие устройства</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4096">Карты и брелки</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4097">Кнопки</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4098">LEGOS</a></li>
</ul><li><a href="/e-store/index.php?SECTION_ID=3956">"Охрана периметра"</a></li>


<li><a href="/e-store/index.php?SECTION_ID=4108">"Системы электропитания"</a><span>+</span></li>



<ul class='cat_razdel'><li><a href="/e-store/index.php?SECTION_ID=4109">АККУМУЛЯТОРЫ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4113">Стабилизаторы напряжения</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4114">Сетевые фильтры</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4115">БЛОКИ ПИТАНИЯ</a></li>
</ul>

<li><a href="/e-store/index.php?SECTION_ID=4120">"Расходные материалы"</a><span>+</span></li>



<ul class='cat_razdel'><li><a href="/e-store/index.php?SECTION_ID=4121">Кабельная продукция</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4122">Крепёж</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4124">Кабельные каналы</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4126">Трубы Гофры</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4127">Саморезы Дюбели</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4128">Коммутационное оборудование</a></li>
</ul>

<div>



</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------
 
I

ioni

А можно ссылочку на готовый вариант?
 
F

firs777

а доктайп прописал без него все криво смотреться будет!
и еще css теги чистил прежде чем вирстать?
птому что во всех браюзерах отступы по разному растовляються и приходиться чистить сначала а потом вирстать=)
 
F

firs777

вот я тут немного поправил у тебя там незакрыты были теги ul и два div
вот верстка и код я провирял работает во всех браузерах
<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">Код тут</div></div><div class="sp-body"><div class="sp-content">
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>


<script type="text/javascript">
function meny(){
$('.cat_group li ul').hide();
$('.cat_group li:has(ul)').children('a').click(function(){
$(this).next().next().toggle('normal');

if($(this).parents('li').find('span').html() == "+") $(this).parents('li').find('span').html("-")
else $(this).parents('li').find('span').html("+")
return false;
})
}
$(document).ready(function(){
meny()

});
</script>


<title>Без названия</title>

</head>
<body>

<div class="catalog-section-list">
<div class="box">
<h3>Каталог<span>+</span></h3>

<ul class='cat_group'>


<li><a href="/e-store/index.php?SECTION_ID=3957">"Видеонаблюдение"</a><span>+</span>

<ul>
<li><a href="/e-store/index.php?SECTION_ID=3958">BEWARD</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3965">Объективы</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3977">ЗАЩИТНЫЕ КОЖУХИ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3979">КРОНШТЕЙНЫ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3981">Устройства инфракрасной подсветки</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3982">Микрофоны</a></li>
<li><a href="/e-store/index.php?SECTION_ID=3983">Видеокамеры</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4004">Мониторы</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4011">Устройства обработки видеосигнала</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4022">Домофоны</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4030">Видеорегистраторы</a></li>
</ul>
</li>

<li><a href="/e-store/index.php?SECTION_ID=4138">"Охранно-пожарная сигнализация"</a><span>+</span>

<ul>
<li><a href="/e-store/index.php?SECTION_ID=4139">Программное обеспечение</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4140">Расходные материалы</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4141">Устройства коммутации</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4142">Дозвонщики</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4143">Пульт управления</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4144">ПРИЕМНО-КОНТРОЛЬНЫЕ ПАНЕЛИ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4145">Светосигнальные устройства, сирены, оповещатели</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4146">Извещатели</a></li>
</ul>
</li>

<li><a href="/e-store/index.php?SECTION_ID=4088">"Контроль доступа"</a><span>+</span>
<ul><li><a href="/e-store/index.php?SECTION_ID=4089">Контроллеры СКД</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4090">Элекрозамки и защелки</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4091">ТУРНИКЕТЫ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4095">Считывающие устройства</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4096">Карты и брелки</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4097">Кнопки</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4098">LEGOS</a></li>
</ul>
</li>

<li><a href="/e-store/index.php?SECTION_ID=3956">"Охрана периметра"</a></li>

<li><a href="/e-store/index.php?SECTION_ID=4108">"Системы электропитания"</a><span>+</span>

<ul><li><a href="/e-store/index.php?SECTION_ID=4109">АККУМУЛЯТОРЫ</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4113">Стабилизаторы напряжения</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4114">Сетевые фильтры</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4115">БЛОКИ ПИТАНИЯ</a></li>
</ul>
</li>

<li><a href="/e-store/index.php?SECTION_ID=4120">"Расходные материалы"</a><span>+</span>

<ul>
<li><a href="/e-store/index.php?SECTION_ID=4121">Кабельная продукция</a>
<li><a href="/e-store/index.php?SECTION_ID=4122">Крепёж</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4124">Кабельные каналы</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4126">Трубы Гофры</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4127">Саморезы Дюбели</a></li>
<li><a href="/e-store/index.php?SECTION_ID=4128">Коммутационное оборудование</a></li>
</ul>
</li>

</ul>
</div>
</div>



</body>
</html>
 
Для ответа нужно войти/зарегистрироваться
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!

Верх Низ