JQuery Custom Accordion - не работает в IE / Safari / Chrome - PullRequest
Новая
       16

JQuery Custom Accordion - не работает в IE / Safari / Chrome

0 голосов
/ 04 августа 2010

Мой скрипт должен развернуть / свернуть элементы UL при нажатии на соответствующий элемент. Он отлично работает в FF и его можно посмотреть здесь .

Сначала я загружаю библиотеку jQuery, а затем свой собственный examples.js, содержащий: 

function initExamples() {
  $('#examples ul').hide();
  $('#examples ul:first').show();
  $('#examples li a:first').addClass('exampleon');
  $('#examples li a').click(function(event) {
      event.preventDefault();
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#examples a.exampleon').removeClass('exampleon');
        $('#examples ul:visible').slideUp('normal');
        $(this).addClass('exampleon');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initExamples();});

С другой стороны, мой HTML выглядит так: 

<ul id="examples">
        <li>
            <a href="#">TITLE TEXT 1</a>
            <ul>
                <li><a href="#">MY CONTENT 1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">TITLE TEXT 2</a>
            <ul>
                <li><a href="#">MY CONTENT 2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">TITLE TEXT 3</a>
            <ul>
                <li><a href="#">MY CONTENT 3</a></li>
            </ul>
        </li>
</ul>

Кажется, что click () не срабатывает в IE / Safari / Chrome, но при первоначальном скрытии / показе это срабатывает, также запускается поведение по умолчанию и ссылки на mypage.html #. ) ;, но, возможно, я сделал это неправильно.

Любая помощь очень ценится!

Ответы [ 2 ]

0 голосов
/ 06 августа 2010

Карасутенгу, большое спасибо, что нашли время, чтобы проверить меня, я действительно ценю это. Мне удалось переключить «: видимый» для альтернативного метода с помощью переключателя jquery. Я думаю, что это могло быть причиной проблемы.

Если кому-то интересно, вот последний кросс-браузер-совместимый код: 

$(document).ready(function() {
  $('#examples ul').hide();
  $('#examples ul:first').show();
  $('#examples li:first').addClass('exampleon');
    $('#examples li a').click(function() {
        $(this).css('outline','none');
        if($(this).parent().hasClass('exampleon')) {
            $(this).siblings('ul').slideUp('slow',function() {
                $(this).parent().removeClass('exampleon');
            });
        } else {
            $('#examples li.exampleon ul').slideUp('slow',function() {
                $(this).parent().removeClass('exampleon');
            });
            $(this).siblings('ul').slideToggle('slow',function() {
                $(this).parent().toggleClass('exampleon');
            });
        }
        return false;
    });
});
0 голосов
/ 04 августа 2010

Извините, но нам понадобится дополнительная информация.Я только что попробовал этот код (jQuery версии 1.4.2): 

<html>
<head>
<title>test</title>

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">

function initExamples() {
  $('#examples ul').hide();
  $('#examples ul:first').show();
  $('#examples li a:first').addClass('exampleon');
  $('#examples li a').click(function(event) {
      event.preventDefault();
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#examples a.exampleon').removeClass('exampleon');
        $('#examples ul:visible').slideUp('normal');
        $(this).addClass('exampleon');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }

$(document).ready(function() {initExamples();});
</script>

</head>
<body>

<ul id="examples">
        <li>
            <a href="#">TITLE TEXT 1</a>
            <ul>
                <li><a href="#">MY CONTENT 1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">TITLE TEXT 2</a>
            <ul>
                <li><a href="#">MY CONTENT 2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">TITLE TEXT 3</a>
            <ul>
                <li><a href="#">MY CONTENT 3</a></li>
            </ul>
        </li>
</ul>
</body>
</html>

, и он, кажется, работает должным образом в Safari.Может быть, это что-то еще из вашего макета?

...