Mark Miller Mark Miller - 3 months ago 7
HTML Question

Pass Click Event to Function - JQuery Toggles Children in Unordered List

I am working in ASPX, but this is just a straight JQuery call. I have a List item with one child list item inside. I am passing "this" to a function when a List Item is clicked. I am trying to get the child list to not expand when the parent is clicked. Any help would be appreciated. Thanks.

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


The "collapsed" class has a
display: none;


Here is the JS using JQuery:

function expandNavigation(itemClicked) {
$(itemClicked).next().toggle(1);
itemClicked.stopPropagation();

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

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


Here is the CSS:

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

Answer

One problem with your code is that you are using both $.toggle and setting/unsetting a class to hide these elements yourself.

One option would be to use only the class approach, and to do so by using $.toggleClass rather than your own custom code:

function expandNavigation(target) {
  $(target).parent().toggleClass('collapsed');
}
ul li.collapsed ul {
  display: none;
  padding-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>