如何在子页面中使用 javascript 禁用主菜单？

Question

我想使用它的 id 禁用子页面中的主菜单项。尝试了“setAttribute”和“disabled”选项。

document.getElementById("bloc_menu:j_id14").setAttribute("disabled","disabled");
document.getElementById("bloc_menu:j_id14").disabled = true;

欢迎提出建议，谢谢。

Answer 1

我仍然不能 100% 确定您要做什么，或者为什么您不能处理这个服务器端，但我已经做了一个可以禁用/启用的简单菜单的小例子。

var $mainMenu, $links;

$(function() {
  $mainMenu = $('#main-menu');
  $links = $mainMenu.find('.menu-item__link').each(function() {
    var $link = $(this);
    $link.data('href', $link.attr('href'));
  });
  $('#toggle-main-menu').on('click', function() {
    toggleMainMenu();
  });
});

function toggleMainMenu() {
  if ($mainMenu.hasClass('disabled')) {
    $mainMenu.removeClass('disabled');
    restoreLinks();
  }
  else {
    $mainMenu.addClass('disabled');
    removeLinks();
  }
}

function removeLinks() {
  $links.removeAttr('href');
}

function restoreLinks() {
  $links.each(function() {
    var $link = $(this);
    $link.attr('href', $link.data('href'));
  });
}

#main-menu .menu-item__link {
  color: #000;
}

#main-menu.disabled .menu-item__link {
  color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu">
  <li class="menu-item">
    <a class="menu-item__link" href="#someLink1">Some link 1</a>
  </li>
  <li class="menu-item">
    <a class="menu-item__link" href="#someLink2">Some link 2</a>
  </li>
  <li class="menu-item">
    <a class="menu-item__link" href="#someLink3">Some link 3</a>
  </li>
</ul>
<button id="toggle-main-menu">Toggle the menu</button>