jQuery 自定义 Accordion - 在 IE/Safari/Chrome 中不起作用答案

【问题标题】：jQuery custom Accordion - not working in IE/ Safari / ChromejQuery 自定义 Accordion - 在 IE/Safari/Chrome 中不起作用
【发布时间】：2010-08-04 00:58:33
【问题描述】：

我的脚本应该在单击相应的<a> 时展开/折叠 UL 元素。它在 Firefox 中运行良好，可以查看 over here。

我先加载 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#' 我试过 @987654326 @，但也许我做错了。

任何帮助都非常感谢！

【问题讨论】：

标签： javascript jquery jquery-selectors jquery-events

【解决方案1】：

Karasutengu 非常感谢您花时间为我进行测试，我真的很感激。我已经设法使用 jquery 的切换切换 ':visible' 为另一种方法。我认为这可能是问题的根源。

如果有人感兴趣，这里是最终的跨浏览器兼容代码：

$(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;
    });
});

【讨论】：

【解决方案2】：

很抱歉，我们需要更多信息。我刚刚尝试了这段代码（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 下工作正常。也许这是您的布局中的其他内容？

【讨论】：