Javascript jQuery自定义手风琴-不适用于IE/Safari/Chrome

当出现相应的

时，我的脚本应该展开/折叠UL元素

我首先加载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();});

<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>

另一方面，我的HTML是这样显示的：

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

<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>



















在IE/Safari/Chrome中，
click（）
似乎不会触发，但初始的隐藏/显示会触发默认行为并链接到“mypage.html”，我尝试了
preventDefault（），但也许我做错了

感谢您的帮助
 对不起，我们需要更多信息。我刚刚尝试了以下代码（jQuery版本1.4.2）：


测试
函数initExamples（）{
$（'#示例ul'）.hide（）；
$（'#示例ul:first'）.show（）；
$（'a:first'）.addClass（'exampleon'）；
$（'a'）。单击（函数（事件）{
event.preventDefault（）；
var checkElement=$（this.next（）；
如果（（checkElement.is（'ul'））和（&（checkElement.is（'：可见）））{
返回false；
}
如果（（checkElement.is（'ul'））&（！checkElement.is（':visible'））{
$（'a.exampleon'）.removeClass（'exampleon'）；
$（“#示例ul:visible”）.slideUp（'normal'）；
$（this.addClass（'exampleon'）；
checkElement.slideDown（'normal'）；
返回false；
}
}
);
}
$（document）.ready（函数（）{initExamples（）；}）；


















在Safari下，它似乎工作正常。也许是你的布局中的其他东西
 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;
    });
});