Javascript 将单击事件传递给函数-JQuery切换无序列表中的子级

我在ASPX工作，但这只是一个直接的JQuery调用。我有一个列表项，其中有一个子列表项。单击列表项时，我将“this”传递给函数。我试图在单击父项时使子项列表不展开。任何帮助都将不胜感激。谢谢

<ul>
    <li id="Menu1" class="collapsed"><a href="javascript:void(0)" onclick="expandNavigation(this);">Faculty Resources</a>
        <ul id="Faculty_Res">
            <li>Archived Courses</li>
            <li>College List</li>
            <li>Current Courses</li>
            <li>Curriculum Outcomes</li>
            <li>EM Accreditation Information</li>
            <li>EM Competencies and Curricula</li>
            <li>EM Job Market Data</li>
            <li>Faculty Positions</li>
            <li id="Menu2" class="collapsed"><a href="javascript:void(0)" onclick="expandNavigation(this);">Program Start Up Resources</a>
                <ul id="Faculty_Res_Prog_Startup">
                    <li>Needs Assessment</li>
                    <li>Proposal Examples</li>
                </ul>
            </li>
            <li>Q&A</li>
            <li>Research</li>
            <li>Syllabi Examples</li>
            <li>Synergy Focus Group</li>
            <li>Synergy Webinar Slides</li>
            <li>Textbooks</li>
            <li>Webinars</li>
        </ul>
    </li>
</ul>

以下是CSS：

 `ul li.collapsed ul {
        display: none;
        padding-left:20px;
    }`

---

似乎您不是在事件上调用

stopPropagation

，而是在元素上调用。通过传递事件，可以对其调用stopPropagation

从

a

元素中删除

onclick

，添加类

切换控件

，使其看起来像：

并使用jQuery绑定到click事件：

$('.toggle-control').on('click', function (event) {
    var itemClicked = this;
    $(itemClicked).next().toggle(1);
    event.stopPropagation();
    event.preventDefault();

    var parentItem = $(itemClicked).parent();

    if (parentItem.hasClass("expanded")) {
        parentItem.removeClass("expanded").addClass("collapsed");
    }
    else if (parentItem.hasClass("collapsed")) {
        parentItem.removeClass("collapsed").addClass("expanded");
    }   
});

---

代码的一个问题是，您同时使用和设置/取消设置类来隐藏这些元素

一种选择是仅使用类方法，并通过使用而不是您自己的自定义代码来实现：

功能扩展导航（目标）{
$（target.parent（）.toggleClass（'collapsed'）；
}

ulli.ul{
显示：无；
左侧填充：20px；
}

存档课程
大学名单
当前课程
课程成果
EM认证信息
EM能力和课程
新兴市场就业市场数据
教师职位


需求评估
提案实例


问答
研究
教学大纲示例
协同重点小组
Synergy网络研讨会幻灯片
教科书
网络研讨会

代码的问题是，您需要对引发的事件调用

stopPropragation（）

，而不是对创建事件的元素调用

还要注意，您应该使用不引人注目的JS代码来附加事件处理程序。在使用jQuery时，这里介绍了如何做到这一点，以及如何使用

toggleClass（）

缩短逻辑

$（'.a'）。单击（函数（e）{
e、 预防默认值（）；
$（this）.next（）.toggle（）.parent（）.toggleClass（'expanded-collapsed'）；
});




存档课程
大学名单
当前课程
课程成果
EM认证信息
EM能力和课程
新兴市场就业市场数据
教师职位


需求评估
提案实例


问:；A
研究
教学大纲示例
协同重点小组
Synergy网络研讨会幻灯片
教科书
网络研讨会


请添加一些解释，说明此代码为何有助于OP。这将有助于提供一个未来观众可以从中学习的答案。有关更多信息，请参阅。不，通过事件后仍然是相同的结果。这就是问题所在。我必须将其传递给函数。请注意，您可以用一行替换整个if/else if构造：
parentItem.toggleClass（'expanded-collapsed'）请注意，css是不必要的，因为sets
display:none
manuallyNope，这是我开始使用的。我添加项目clicked.stopPropagation（）；在研究了一段时间之后。哈姆斯：页面加载时没有实现切换。这就是为什么我必须显示：none。在这种情况下，只使用add/remove类，而不是
切换。正如Rory所提到的，使用
toggleClass
来实现这一点。仍然不起作用，因为我必须将其传递给函数。不幸的是，我不能这样做。我必须调用这个函数。而且，这个函数没有按照我希望的方式工作。所有的列表元素在加载时都会使用此命令展开。我想让他们都倒下。然后，当你单击顶层/父级时，子级仍然应该被折叠。这只是因为我没有在中添加CSS规则，因为你在后面的问题中添加了CSS规则根本没有。正如我提到的，这个片段只是缺少了你在问题中编辑的CSS。我将答案更新为包含，您现在可以看到它正在工作。
$('.toggle-control').on('click', function (event) {
    var itemClicked = this;
    $(itemClicked).next().toggle(1);
    event.stopPropagation();
    event.preventDefault();

    var parentItem = $(itemClicked).parent();

    if (parentItem.hasClass("expanded")) {
        parentItem.removeClass("expanded").addClass("collapsed");
    }
    else if (parentItem.hasClass("collapsed")) {
        parentItem.removeClass("collapsed").addClass("expanded");
    }   
});