Question

我正在使用一些jQuery和CSS在一组嵌套的<ul>中使链接的页面变长，以便于用户使用。我无法直接编辑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的问题-作为简化的展示，您可以使用事件绑定和解除绑定：

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>

如何重新启用已被e.preventDefault（）禁用的jQuery链接？

1 个答案: