javascript - 如何重新启用已被 e.preventDefault() 禁用的 jQuery 链接？

Question

我正在努力在一组嵌套 <ul> 中制作一个长链接页面使用一些 jQuery 和 CSS 对用户更友好。我无法直接编辑 HTML，但我能够编写代码来折叠列表，以便只有顶层 <li>的显示，然后当用户单击其中一个时，它会展开以显示所有子项。

问题是顶级元素也是链接。我想在 <li> 时禁用链接折叠(并且具有类 .notActive)，并在展开时重新启用它们(并且具有类 .open)，以便用户可以展开菜单而无需离开页面。

不幸的是，我尝试过的解决方案要么在 100% 的情况下禁用了链接(使用 event.preventDefault(); 时)，要么禁用了所有点击事件(使用 pointer-events:none; 时)，这也禁用了展开/折叠功能.

我读过类似的问题，比如这个: How do I dynamically enable/disable links with jQuery?但一直无法弄清楚如何重新启用链接。

这是我的 jsfiddle:https://jsfiddle.net/9raufx3s/121/这是我的代码目前的样子:

代码:

$(document).ready(function($) {

	$(".children").closest("li").addClass("hasSubmenu");

	if ($("li").hasClass("hasSubmenu")) {
		$("li.hasSubmenu").append("<span class='plus'>&nbsp;&nbsp;&#43;</span>");
	}

	$(".cat-item").click(function(e) {
		$(this).toggleClass("open");
		e.stopPropagation();
	});
});

$("ul.category-column").after("<p class='all'>Expand All</p>");
$("p.all").click(function(f) {
	$(".cat-item").addClass("open");
});

$(document).ready(function($) {
	var top = $("ul.category-column li.hasSubmenu").first();
	top.addClass("topLevel notActive");
	top.siblings("li").addClass("topLevel notActive");

	$("li.topLevel").click(function(n) {
		$(this).toggleClass("notActive");
	});
});
$(document).ready(function($) {
	$("li.notActive a").on('click', function(disabled) {
		disabled.preventDefault();
	});
	$("li.open a").on('click', function(enabled) {
		return true;
	});
});

li.open * {
  display:block !important;
}    
.children {
  display:none;
}    
li.open>span.plus {
  display:none !important;
}    
li.open>ul.children>li.hasSubmenu>span.plus {
  display:none !important;
}    
.all {
  font-weight:bold;
  cursor:pointer;
}    
.notActive {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category-column">
	<li class="cat-item cat-item-3"><a href="https://www.google.com">I. Heading Number One</a>
		<ul class="children">
			<li class="cat-item cat-item-481"><a href="#">Subheading A</a></li>
			<li class="cat-item cat-item-483"><a href="https://www.google.com">Subheading B</a>
				<ul class="children">
					<li class="cat-item cat-item-587">Child of subheading B</li>
					<li class="cat-item cat-item-588">Second child of subheading B</li>
				</ul>
			</li>
		</ul>
	</li>

	<li class="cat-item cat-item-4">II.Heading Number Two
		<ul class="children">
			<li class="cat-item cat-item-200"><a href="#">Subheading C</a></li>
			<li class="cat-item cat-item-201"><a href="#">Subheading D</a>
				<ul class="children">
					<li class="cat-item cat-item-300">Child of subheading D</li>
					<li class="cat-item cat-item-301">Second Child of subheading D</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Answer 1

要回答有关撤消 preventDefault 的问题 - 您可以使用事件绑定(bind)和解除绑定(bind)，作为一个简化的展示:

function generic(evt) {
  console.log('generic');
  $('.toggable', this).toggleClass('hidden');
};

function toggle(evt) {
  console.log('prevents');
  evt.stopPropagation();
  evt.preventDefault();
}

$('.toggle').on('click', function() {
  var $this = $(this),
      $target = $('.target');
  if($this.hasClass('prevents')) {
    $target.unbind('click', toggle);
    $this.removeClass('prevents');
  } else {
    $target.bind('click', toggle);
    $this.addClass('prevents');
  }
});

$('.target').bind('click', generic);

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://duckduckgo.com/" class="target" target="_blank">Duck<span class="toggable hidden">(toggable)</span></a>

<hr>

<a href="#" class="toggle">Toggle handler</a>

但对于您的用例，您可以以更简单、更高效的方式来完成，再次作为简化的展示:

$('li').each(function() {
  var $this = $(this),
      $children = $('>ul', this),
      $link = $('>a', this);
  $this.on('click', function(evt) {
    console.log('li clicked, propagation stopped');
    // Don't bubble up collapsing
    evt.stopPropagation();
    $children.toggleClass('open');
  });
  $link.on('click', function(evt) {
    if($children.length === 0 || $children.hasClass('open')) {
      // If children are expanded or there are no children
      // only prevent bubbling up the event
      console.log('link clicked, propagation stopped');
      evt.stopPropagation();
    } else {
      // If children are not expanded yet
      console.log('link clicked, default prevented');
      evt.preventDefault();
    }
  });
});

var collapsed = true;
$('.toggle-all').on('click', function(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  if(collapsed) {
    $('ul').addClass('open');
    collapsed = false;
  } else {
    $('ul').removeClass('open');
    collapsed = true;
  }
});

li>ul { display: none; }
li>ul.open { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Parent
    <ul>
      <li>Child</li>
      <li>Child</li>
    </ul>
  </li>
  <li><a href="#">Parent</a>
    <ul>
      <li><a href="#">Child</a></li>
      <li>Child</li>
    </ul>
  </li>
</ul>

<a href="#" class="toggle-all">Toggle all</a>