Question

我在'ul，li'中有菜单如何使用JavaScript禁用父菜单？我想停止重定向父菜单，只有子菜单会被重定向

我无法在html中添加class或id来禁用父菜单。有什么方法可以帮助停止使用JavaScript重定向？

以下是我的HTML代码：

<ul class="firstLevel" style="">
  <li class="sel">
    <div class="item">
      <a title="Home" href="#/"><span>Home</span></a>
    </div>
  </li>
  <li class="dir">
    <div class="item">
      <a title="About Us" href="#/page-18080"><span>About Us</span></a>
      <ul class="secondLevel">
        <li class=" ">
          <div class="item">
            <a title="Vision" href="#/page-18126"><span>Vision</span></a>
          </div>
        </li>

        <li class=" ">
          <div class="item">
            <a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
          </div>
        </li>

        <li class=" ">
          <div class="item">
            <a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
          </div>
        </li>

        <li class=" ">
          <div class="item">
            <a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
          </div>
        </li>

      </ul>
    </div>
  </li>
  <li class="dir">
    <div class="item">
      <a title="Events" href="#/events"><span>Events</span></a>
      <ul class="secondLevel">
        <li class=" ">
          <div class="item">
            <a title="About the event" href="#/page-18147"><span>About the event</span></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Answer 1

https://api.jquery.com/event.stoppropagation/

$(child).on("click", function(event) {
  // TODO

  event.stopPropagation();
});

Answer 2

根据我的理解，您要禁用除firstLevel下的链接以外的所有secondLevel个链接。根据要求，我没有触及HTML，javascript将自行完成所有工作。

查看逐步说明的评论：

$(function() {
  $(".firstLevel").find('a').each(function() {
    // this is all link elements under element with class firstlevel 
    if ($(this).parents('.secondLevel').length) {
      // this is all link elements which also is under element with class secondLevel
      $(this).click(function() {
        //don't disturb the event here. feel free to remove the below alert as well.
        alert("this link will work");
      });
    } else {
      // this is all link elements under a firstLevel element but not a secondLevel element
      $(this).click(function() {
        // we shud block this click. we will return false so that jQuery will internally call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
        alert("this link will not work");
        return false;
      });
    }
  });
});

工作内容示例：（请注意，HTML与您发布的内容相同。此处未进行任何更改，仅添加了上述javscript！）

$(function() {
  $(".firstLevel").find('a').each(function() {
    if ($(this).parents('.secondLevel').length) {
      $(this).click(function() {
        alert("this link will work");
      });
    } else {
      $(this).click(function() {
        alert("this link will not work");
        return false; //this will call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="firstLevel" style="">
  <li class="sel">
    <div class="item">
      <a title="Home" href="#/"><span>Home</span></a>
    </div>
  </li>
  <li class="dir">
    <div class="item">
      <a title="About Us" href="#/page-18080"><span>About Us</span></a>
      <ul class="secondLevel">
        <li class=" ">
          <div class="item">
            <a title="Vision" href="#/page-18126"><span>Vision</span></a>
          </div>
        </li>

        <li class=" ">
          <div class="item">
            <a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
          </div>
        </li>

        <li class=" ">
          <div class="item">
            <a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
          </div>
        </li>

        <li class=" ">
          <div class="item">
            <a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
          </div>
        </li>

      </ul>
    </div>
  </li>
  <li class="dir">
    <div class="item">
      <a title="Events" href="#/events"><span>Events</span></a>
      <ul class="secondLevel">
        <li class=" ">
          <div class="item">
            <a title="About the event" href="#/page-18147"><span>About the event</span></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

如何使用JavaScript禁用主菜单？

2 个答案: