Проблемы с jquery в ie9 (.slidedown(), .hide())

Я пытаюсь получить скрытый div для .slideDown()/.slideUp() после нажатия ссылки выше. У div есть свойство отображения «скрыто». Он отлично работает во всех браузерах, кроме IE9. Когда я нажимаю на ссылку в IE9, ничего не происходит, то есть скрытый div не отображается. Но если я установлю свойство отображения div как «видимое», оно очень хорошо переключается. Я пробовал .show()/.hide(), а также .toggle(), но получаю те же результаты. Есть идеи, как это исправить?

Вот мой HTML-код

<span class="toggle">
<li id="toggler">
    <a id="atoggler1" href="#">
        '.$info['category'].'
    </a></li></span>
<div class="hiddenDiv">
<p>
    $info['description']
</p>
.....
.....
 </div>

Вот мой CSS-код

.hiddenDiv{
    display: none;
 }

Вот мой JavaScript

$(document).ready(function() {

$(".toggle").click(function () {

    // check the visibility of the next element in the DOM
    if ($(this).next().is(":hidden")) {
        $(this).next().slideDown("fast"); // slide it down
        return false;
    } else {
        $(this).next().slideUp("fast"); // hide it
        return false;
      }
  });
});

Также для записи мой HTML-код обернут вокруг php-кода. Я не включил это для ясности.

Как можно решить эту проблему? Или какие у меня есть альтернативы??


jquery internet-explorer-9 slidedown
person Karan Singh    schedule 13.06.2012    source источник
comment
Откройте консоль (F12) и перейдите в консоль Script, чтобы увидеть, не возникают ли какие-либо ошибки (вам придется перезагрузить страницу).   -  person Kevin B    schedule 13.06.2012
comment
Ваша разметка неверна. Пожалуйста, измените ее.   -  person Behnam Esmaili    schedule 13.06.2012
comment
Недопустимый html даст вам противоречивые результаты в разных браузерах.   -  person Kevin B    schedule 13.06.2012
comment
Элементы li могут содержаться только в элементах ul, ol и menu. developer.mozilla.org/en/HTML/Element/li   -  person Kevin B    schedule 14.06.2012

Ответы (3)


arrow_upward
0
arrow_downward

После исправления отсутствующего закрытого div в вашем HTML и изменения кода, чтобы настроить правильный div, это отлично работает для меня в IE9:

$(document).ready(function() {

    $(".toggle").click(function () {
        $(this).closest(".toggle").next().slideToggle("fast");
        return(false);
    });

});​

Рабочая демонстрация: http://jsfiddle.net/jfriend00/d3TX9/

  1. В вашем HTML в вашем вопросе не было закрывающего </div> для hiddenDiv
  2. Я убедился, что независимо от того, где происходит щелчок, он будет выполнять .next() из объекта .toggle.
  3. Я переключился на slideToggle() для простоты.
person jfriend00    schedule 13.06.2012

arrow_upward
0
arrow_downward

$(this).next() из

<span class="toggle">

is 

<li id="toggler">

а не то, что вы пытаетесь показать, что

<div class="hiddenDiv">

по вашей разметке. Если вы используете

$('#toggler').find('.hiddenDiv')

вместо этого это должно решить проблему

person John Culviner    schedule 13.06.2012

arrow_upward
0
arrow_downward

По какой-то причине он не работал, если мой тег ссылки на мой файл CSS находился внутри тегов HTML. Но если я оставлю их снаружи, это испортит мой стиль. Проведя много исследований, я обнаружил, что в jQuery или IE9 есть ошибка. Когда я запускал свою консоль, я получал ошибку недопустимого вызова, когда щелкал ссылку. Эта ошибка была в моем коде jQuery именно в этой строке. Вызов был this.appendChild( elem );, но чтобы исправить это, мне пришлось изменить его на this.parentNodeappendChild( elem );, и это исправилось.

Итак, если в будущем у кого-то еще возникнет эта проблема, вот как ее исправить:

  1. В зависимости от вашей версии jQuery проверьте строку с ошибкой, запустив консоль
  2. Перейдите к этой строке и измените this.appendChild( elem ); на this.parentNode.appendChild( elem );.
person Karan Singh    schedule 14.06.2012