Javascript 悬停/点击问题

Question

我有一个 Accordion 风格的菜单，在悬停状态下工作正常，但我想改为点击...

<script type="text/javascript">

$(document).ready(function(){
    $('#nav > li').hover(
        function() {
            if ($('> span',this).attr('class') != 'active') {
                $('#nav li ul').slideUp();
                $('span',this).next().slideToggle();
                $('#nav li span').removeClass('active');
                $('> span',this).addClass('active');
            }
        },
        function() {
            $('#nav li ul').slideUp();
            $('#nav li a').removeClass('active');
        });
    });
</script>

但是简单地将 hover 替换为 click 是行不通的，任何建议都非常感谢我是一名设计师，所以我的 JS 很差:)

Answer 1

试试这个，

<script type="text/javascript">
$(document).ready(function () {
        $('#nav > li').click(function () {
            if ($('> span', this).attr('class') != 'active') {
                $('#nav li ul').slideUp();
                $('span', this).next().slideToggle();
                $('#nav li span').removeClass('active');
                $('> span', this).addClass('active');
            }
        }).mouseout(function (e) {
            if ($(e.target).parents().find('#' + $(this).attr('id')).length) return;
            $('#nav li ul').slideUp();
            $('#nav li span').removeClass('active');
        });
    });

</script>

HTML:

<li id="t1"><span>Nav item click me 1</span>
                <ul>
                    <li><a href="#">Sub link 1</a></li>
                    <li><a href="#">Sub link 2</a></li>
                    <li><a href="#">Sub link 3</a></li>
                    <li><a href="#">Sub link 4</a></li>
                </ul>
            </li>
            <li id="t2"><span>Nav item click me 2</span>
                <ul>
                    <li><a href="#">Sub link 1</a></li>
                    <li><a href="#">Sub link 2</a></li>
                    <li><a href="#">Sub link 3</a></li>
                    <li><a href="#">Sub link 4</a></li>
                </ul>
            </li>