Событие полностью срабатывает в ie только по 2 клику
Добрый день!
Подскажите пожалуйста..Jquery знаю постольку-поскольку..столкнулась с проблемой - не корректно работают табы в ie 9 и ниже. В старших ie и других браузерах нормально все. Сокращенный html: <div class="content_tabs"> <div class="content_tabs_left"> <a href="#"> <div class="content_tabs_left_tab content_tabs_left_tab1" id="tab_1"> <img src="images/img1.png" alt="" /> <span>Текст1</span> </div> </a> <a href="#"> <div class="content_tabs_left_tab" id="tab_2"> <img src="images/img2.png" alt="" /> <span>Текст2</span> </div> </a> <a href="#"> <div class="content_tabs_left_tab" id="tab_3"> ... </div> </a> </div> <div class="content_tabs_right"> <div class="content_tab_right1 tab_1"> <h4>Заголовок1</h4> <span>Текст2_1</span> <p>Скрытый текст2_1</p> <a href="#" class="content_tabs_right_a"> <img src="images/about.png" alt="" /> <span>Подробнее</span> </a> </div> <div class="content_tab_right tab_2"> <h4>Заголовок2</h4> <span>Текст2_2</span> <p>Скрытый текст2_2</p> <a href="#" class="content_tabs_right_a"> <img src="images/about.png" alt="" /> <span>Подробнее</span> </a> </div> <div class="content_tab_right tab_3"> ... </div> </div> </div> CSS (избыточен, но выложила весь): .content_tabs_left{ width:295px; height:190px; float:left; font-size:12px; } .content_tabs_left a{ text-decoration:none; cursor:pointer; } .content_tabs_left_tab1{ width:100%; height:25px; border-top:1px solid #44514e; border-bottom:1px solid #44514e; background-color:#4bbc9c; color:#fff; } .content_tabs_left_tab{ width:100%; height:25px; border-top:1px solid #fff; border-bottom:1px solid #959797; } .content_tabs_left_tab1 img, .content_tabs_left_tab img{ float:left; margin:8px 0 0 15px; } .content_tabs_left_tab1 span, .content_tabs_left_tab span{ margin:4px 0 0 38px; } .content_tabs_right{ width:465px; height:auto; float:right; position:relative; } .content_tab_right{ position:absolute; display:none; } .content_tab_right1{ position:relative; display:block; } .content_tab_right1 p{ display:none; } .content_tabs_right h4{ font-size:12px; font-family: 'open_sansbold'; margin:0; color:#2c2c2c; border-bottom:1px solid #2c2c2c; padding-bottom:6px; display:inline-block; margin-bottom:10px; position:relative; } .content_tabs_right_a{ display:block; text-decoration:none; float:right; cursor:pointer; } .content_tabs_right_a span{ font-size:12px; color:#2c2c2c; display:inline; margin-right:1px; padding:0; float:right; } .content_tabs_right_a img{ display:inline; float:right; margin:5px 0 0; } Jquery (который работает в остальных браузерах): function other() { $('.content_tabs_right_a').click(function() { var $b = $(this).parent().find('p'); if ($($b).is(':hidden')) { $($b).css('display','block'); $(this).find('span').html("Свернуть"); } else{ $($b).hide(); $(this).find('span').html("Подробнее"); } return false; }); } other(); $(".content_tabs_left_tab").click(function() { $('.content_tabs_left_tab1').removeClass('content_tabs_left_tab1').find('img').attr('src','images/img2.png'); $(this).addClass('content_tabs_left_tab1').find('img').attr('src','images/img1.png'); $a = $(this).attr('id'); $('.content_tab_right1').removeClass('content_tab_right1').addClass('content_tab_right'); $('.content_tabs_right').find('.' + $a).removeClass('content_tab_right').addClass('content_tab_right1').find('p').hide().parent().find('.content_tabs_right_a span').html("Подробнее"); return false; }); В общем получается, что при клике на левые табы - должны появляться соответствующие им правые табы. Они в ie появляются, но без заголовка (т.е. span, p и a - без h4). При повторном клике на левый таб - появляется в дополнение и заголовок. (Т.е. в том виде, в каком все и должно быть). Также я привела код для клика по "Подробнее", т.к. при клике на него - также срабатывает событие полностью (появляется скрытый текст "p" и появляется заголовок). Зарание спасибо. |
Nastya_Na,
то есть пофигу что id одинаковое Цитата:
Цитата:
|
Nastya_Na,
сделали бы макет здесь или в песочнице - кто будет собирать эти части и версию jQuery укажите. |
Версия v1.7.2
id-шки случайно не переделала при копипасте табов. Исправила. В исходном коде id разные. Мне кажется, проблема могла бы решиться, если каким-то образом эмулировать второй клик. (Ведь в этом случае все работает). Если двигаться в этом направлении, не подскажете, как это сделать? |
Nastya_Na,
загадка остаётся прежней без макета ваш второй клик мало кто обнаружит |
Часовой пояс GMT +3, время: 21:06. |