Javascript悬停/单击故障

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

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

$（文档）.ready（函数（）{
$（'#nav>li'）。悬停(
函数（）{
if（$（'>span'，this）.attr（'class'）！='active'）{
$（'#nav li ul'）.slideUp（）；
$（'span'，this.next（）.slideToggle（）；
$（'#nav li span'）.removeClass（'active'）；
$（'>span'，this.addClass（'active'）；
}
},
函数（）{
$（'#nav li ul'）.slideUp（）；
$（'#nav li a'）.removeClass（'active'）；
});
});

但是简单地用点击代替悬停是行不通的，我是一名设计师，所以我的JS很差：）

.hover（function（）{}，function（））；//。hover（）接受两个函数

。单击（函数（）{}）；//只接受一个

试一试

试试这个

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

$（文档）.ready（函数（）{
$（'#nav>li'）。单击（函数（）{
if（$（'>span'，this）.attr（'class'）！='active'）{
$（'#nav li ul'）.slideUp（）；
$（'span'，this.next（）.slideToggle（）；
$（'#nav li span'）.removeClass（'active'）；
$（'>span'，this.addClass（'active'）；
}
}).mouseout（功能（e）{
if（$（e.target）.parents（）.find（'#'+$（this.attr（'id'））.length）返回；
$（'#nav li ul'）.slideUp（）；
$（'#nav li span'）.removeClass（'active'）；
});
});

HTML:

导航项目点击我1

导航项目点击我2

---

当然，因为hover有两个功能，一个是“开”hover，另一个是“关”hover，将其更改为“点击”将不起作用，您需要将“off”调用中的代码放回您的

if

语句的

else

部分。您还可以使用

onmousedown

和

onmouseup

事件请发布一个HTML示例，因为无法从脚本中判断哪些元素是什么。最好是一个JS小提琴手！请参阅上面的JSFIDLE内容，感谢大家的帮助。到目前为止，一切正常。。。。谢谢你，约翰！：）啊，实际上有些东西有点粘。单击“导航项目单击我1”（在上面的链接上），滚动它，然后再次尝试单击它，不想玩球。有什么想法吗？@keirananderson，在mouseout，我们需要把nav li a换成nav li span。回答updatedAh当我离开主导航项目时，它会关闭，所以你不能进入子导航links@keirananderson，答案已更新。李一定有身份证。

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

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