使用 slideToggle 展开和折叠列表项

Question

对于点击使用 expands/collapses 的嵌套列表，如何防止在最低级别的项目上出现 "toggle"？例如，列表中的最后一项是 hyperlink，但单击会折叠列表而不是打开 link.

jQuery('.intranet ul').hide();

jQuery('.intranet-folder').click(function() {
  jQuery(this).children("ul").slideToggle();
  return false;
});

.intranet-folder {cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="intranet">
  <li class="intranet-folder">Years
    <ul>
      <li class="intranet-folder">2015
        <ul>
          <li class="intranet-folder">January
            <ul>
              <li><a href="#">Click to download file</a></li>
            </ul>
          </li>
          <li class="intranet-folder">February
            <ul>
              <li><a href="#">Click to download file</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="intranet-folder">2014
        <ul>
          <li class="intranet-folder">November
            <ul>
              <li><a href="#">Click to download file</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 1

作为参考，我在 how to make an expandable list 找到了答案。

$(function prepareList() {
 $('#expList').find('li:has(ul)').unbind('click').click(function(event) {
  if(this == event.target) {
   $(this).toggleClass('expanded');
   $(this).children('ul').toggle('medium');
  }
  return false;
 }).addClass('collapsed').removeClass('expanded').children('ul').hide();
 
 //Hack to add links inside the cv
 $('#expList a').unbind('click').click(function() {
  window.open($(this).attr('href'));
  return false;
 });
 //Create the button functionality
 $('#expandList').unbind('click').click(function() {
  $('.collapsed').addClass('expanded');
  $('.collapsed').children().show('medium');
 })
 $('#collapseList').unbind('click').click(function() {
  $('.collapsed').removeClass('expanded');
  $('.collapsed').children().hide('medium');
 })
});

#expList ul, li {
  list-style: none;
  cursor: pointer;
}
  
#expList li {
 line-height:140%;
 text-indent:0px;
 background-position: 1px 8px;
 background-repeat: no-repeat;
}

#expList .collapsed:before {
 font-family: FontAwesome;
   content: "\f07b[=11=]a0";
}

#expList .expanded:before {
   content: '\f07c[=11=]a0';
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="intranet" id="expList">
  <li class="intranet-folder">Years
    <ul>
      <li class="intranet-folder">2015
        <ul>
          <li class="intranet-folder">January
            <ul>
              <li><a href="#">Click to download file</a></li>
            </ul>
          </li>
          <li class="intranet-folder">February
            <ul>
              <li><a href="#">Click to download file</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="intranet-folder">2014
        <ul>
          <li class="intranet-folder">November
            <ul>
              <li><a href="#">Click to download file</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

使用 slideToggle 展开和折叠列表项

Use slideToggle to expand & collapse list items

jquery

list

slidetoggle