如何在面板内显示和隐藏 <li>？

Question

我有一个有登录页面的应用程序。为了登录，用户有权在面板内看到两个声音（如果用户是管理员）。如果用户不是管理员，我不想显示这些声音。我的问题是如何隐藏和显示它。我有面板里面 index.html.This 是我想要显示或不显示的声音，以便用户许可。

            <li id="company" display="none">
                    <a href="/aziende/" class="panel-close" >
                        <div class="item-content">
                            <div class="item-media">
                                <i class="f7-icons ios-only">home</i>
                                <i class="material-icons md-only">home</i>
                            </div>
                            <div class="item-inner">
                                <div class="item-title">Company</div>
                            </div>
                        </div>
                    </a>    
                </li>

                <li id="users" display="none">
                    <a href="/users/" class="panel-close">
                        <div class="item-content">
                            <div class="item-media">
                                <i class="f7-icons ios-only">person</i>
                                <i class="material-icons md-only">account_circle</i>
                            </div>
                            <div class="item-inner">
                                <div class="item-title">Users</div>
                            </div>
                        </div>
                    </a>
                </li>

这是app.js

     {
        name: 'login',
        path: '/login/',
        url: './pages/login.html',
        on:{ 
                pageInit: function(){

                    app.navbar.hide('.navbar');
                    if(user.checkPermission() == 'true'){
                        app.router.navigate('/home/');

                        }
                    }
            },
    },
    {
        name: 'home',
        path: '/home/',
        url: './pages/home.html',
        on: {
            pageInit:   function(e, page) {

                            app.navbar.show('.navbar');
                             if(user.checkPermission() == 'true'){
                                addVoicesToNavbar();

                             }
                            }                                   
                            page.router.clearPreviousHistory();
                        }

        },
    }

这个方法告诉我不能设置属性 ‘display’ of null

  function addVoicesToNavbar(){
      document.getElementById("company").display = "block";
      document.getElementById("users").display = "block";

   }

Answer 1

display 不是有效的 html 属性，它是 CSS 属性。

所以在示例中对 <li> 设置 display="none" 没有任何作用。

您需要在您的标记中设置内联 CSS 样式以最初隐藏元素：

<li id="users" style="display:none;">

然后在您的函数中更改内联 CSS 样式以显示它：

document.getElementById("users").style.display = "block";

Answer 2

这是您可以执行的操作的示例：

 function addVoicesToNavbar(){
      companyElement = document.getElementById("company");
      companyElement.style.display = "block";

      ...
   }

希望对您有所帮助！

如何在面板内显示和隐藏 <li>？

How can show and hide a <li> inside the panel?

javascript

html-framework-7