javascript - 使用JQuery根据类名隐藏主菜单的元素

Question

在 wordpress 网站上，我在 header.php 的 head 部分使用以下代码来检查用户是否登录(不是在 wordpress admin 中而是在单独的登录区域中)以及他们是否登录不是，我想隐藏一个特定的菜单项(使用带有 JQuery 的 li 元素的类名):

<?php

if (isset($_COOKIE["username"])) {  

    // Do all relevant code for logged in users here

    }

else {
?>
<script type="text/javascript">

 $(document).ready(function() {        
    $('#menu-main-navigation-1 li.menu-item-123').hide();        


 });      

</script>
<?php
    // Do all relevant code for logged-out users here  

    }
?> 

ul元素的id是menu-main-navigation-1，需要隐藏的li类是菜单项菜单项类型自定义菜单项对象自定义菜单项 123

我已经尝试过使用 $(document).ready(function() 和不使用但是没有任何区别，菜单项仍然显示。

Answer 1

调用hide 不是一个好主意。它只会更改项目的可见性，但它仍会出现在源中。如果您绝对必须在 javascript 中执行此操作，请调用 remove，但此方法仍然不考虑已禁用它的那些用户。

但幸运的是，您可以在生成 html 之前通过 Hook 从 wordpress 菜单中删除元素:

 function filter_remove_menu_item_for_anons($menu_items, $args) {
    foreach($menu_items as $k => $item) {
      if ($item->ID == 123) {
        unset($menu_items[$k]);
      }
    }
    return $menu_items;
  }
  add_filter('wp_nav_menu_objects', 'filter_remove_menu_item_for_anons', 10, 2);

只需根据您的 session 检查注册过滤器即可。

如果您有多个菜单并且需要更精细的控制，您可以使用 args 进行额外检查参数。

但是，如果用户知道 URL，他仍然可以访问内容，您应该考虑其他 solution .