Question

如果子菜单有子菜单

，如何从父菜单锚点中删除链接

<ul class="sitemap-ul">
    <li> <a href="/">Home</a></li>
    <li> <a href="/aboutus/">about Us</a> <!-- Remove link-->
        <ul>
            <li><a href="/mission">mission</a></li>
            <li><a href="/vision">vission</a></li>
        </ul>
    </li>
    <li> <a href="/media">Media</a> <!-- Remove link-->
        <ul>
            <li><a href="/media/news">news</a></li>

        </ul>
    </li>
    <li> <a href="/contact/">Contact</a></li>
</ul>

Answer 1

您可以使用jQuery :has()伪类选择器。

$('.sitemap-ul > li:has(ul) > a').remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sitemap-ul">
    <li> <a href="/">Home</a></li>
    <li> <a href="/aboutus/">about Us</a> <!-- Remove link-->
        <ul>
            <li><a href="/mission">mission</a></li>
            <li><a href="/vision">vission</a></li>
        </ul>
    </li>
    <li> <a href="/media">Media</a> <!-- Remove link-->
        <ul>
            <li><a href="/media/news">news</a></li>

        </ul>
    </li>
    <li> <a href="/contact/">Contact</a></li>
</ul>

更新：如果您只想将a代码替换为文字，请使用contents()方法和unwrap()方法。

$('.sitemap-ul > li:has(ul) > a')
  // get children element
  .contents()
  // unwrap them
  .unwrap()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sitemap-ul">
  <li> <a href="/">Home</a></li>
  <li> <a href="/aboutus/">about Us</a>
    <!-- Remove link-->
    <ul>
      <li><a href="/mission">mission</a></li>
      <li><a href="/vision">vission</a></li>
    </ul>
  </li>
  <li> <a href="/media">Media</a>
    <!-- Remove link-->
    <ul>
      <li><a href="/media/news">news</a></li>

    </ul>
  </li>
  <li> <a href="/contact/">Contact</a></li>
</ul>

Answer 2

假设您要删除<a>元素本身但留下其文字内容，您可以使用:has()获取相关的li子菜单，然后replaceWith()孩子a元素，如下：

$('.sitemap-ul > li:has(ul) > a').replaceWith(function() {
  return $(this).text();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sitemap-ul">
  <li><a href="/">Home</a></li>
  <li>
    <a href="/aboutus/">About Us</a>
    <ul>
      <li><a href="/mission">mission</a></li>
      <li><a href="/vision">vission</a></li>
    </ul>
  </li>
  <li> 
    <a href="/media">Media</a>
    <ul>
      <li><a href="/media/news">news</a></li>
    </ul>
  </li>
  <li><a href="/contact/">Contact</a></li>
</ul>

Answer 3

$('.sitemap-ul > li').each(function(){
    if($('ul', this).length > 0){
        $(this).closest("a").click(function(e){
            e.preventDefault();
        }); 
    }
});

Answer 4

我有一个解决方案，为你使用香草js。

var elements = document.querySelectorAll(".sitemap-ul li")

Array.from(elements).forEach(function(el) {
  if (el.children.length > 1) {
    el.removeChild(el.children[0])
  }
});

如果父菜单有子菜单，则从父菜单中删除链接

4 个答案: