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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем teclis, 23 авг 2010.

  1. teclis

    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">&quot;Видеонаблюдение&quot;</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">&quot;Охранно-пожарная сигнализация&quot;</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">&quot;Контроль доступа&quot;</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">&quot;Охрана периметра&quot;</a></li>


    <li><a href="/e-store/index.php?SECTION_ID=4108">&quot;Системы электропитания&quot;</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">&quot;Расходные материалы&quot;</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>
    ------------------------------------------------------------------------------------------------------------------------------------
     
  2. ioni

    ioni Well-Known Member

    Регистрация:
    11 май 2006
    Сообщения:
    351
    Симпатии:
    0
    А можно ссылочку на готовый вариант?
     
  3. firs777

    firs777 Гость

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

    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">
    Код (Text):
    <!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">&quot;Видеонаблюдение&quot;</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">&quot;Охранно-пожарная сигнализация&quot;</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">&quot;Контроль доступа&quot;</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">&quot;Охрана периметра&quot;</a></li>

    <li><a href="/e-store/index.php?SECTION_ID=4108">&quot;Системы электропитания&quot;</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">&quot;Расходные материалы&quot;</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>
     
Загрузка...

Поделиться этой страницей