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

发布于 2024-09-12 13:26:25 字数 1969 浏览 6 评论 0原文

当单击相应的 时,我的脚本应该展开/折叠 UL 元素。它在 Firefox 中运行良好,可以在此处查看。

我首先加载 jQuery lib,然后加载我自己的 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#”我尝试过 preventDefault();,但也许我做错了。

任何帮助都非常感谢!

My script should expand/collapse UL elements when a corresponding <a> is clicked. It works in Firefox fine and can be viewed over here.

I am loading jQuery lib first then my own examples.js which contains:

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

My HTML on the other hand appears like so:

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

The click() doesn't seem to trigger in IE/Safari/Chrome, but the initial hide/show does, it also triggers the default behaviour and links to 'mypage.html#' I've tried a preventDefault();, but perhaps I did it wrong.

Any help is uber appreciated!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

二手情话 2024-09-19 13:26:25

非常感谢 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;
    });
});

Karasutengu many thanks indeed for taking the time to test for me, I really appreciate that. I've managed to switch the ':visible' for an alternative method using jquery's toggle. I think this may have been the stem of the problem.

If anyone's interested here's the final cross-browser compatible code:

$(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;
    });
});
少女情怀诗 2024-09-19 13:26:25

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

I'm sorry, but we will need more information. I just tried this code (jQuery version 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>

and it seems to be working properly under Safari. Maybe it's something else from your layout?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文