Как можно показать и скрыть <li>внутри панели? - PullRequest
Новая
       8

Как можно показать и скрыть <li>внутри панели?

0 голосов
/ 29 ноября 2018

У меня есть приложение, которое имеет страницу входа.Для входа в систему пользователь имеет право видеть два голоса внутри панели (если пользователь является администратором).Если пользователь не является администратором, я бы не хотел показывать эти голоса.Моя проблема в том, как спрятать и показать ее.У меня есть панель внутри index.html. Это голос, который я хотел бы отображать или нет для разрешения пользователей. 

            <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' для null 

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

   }

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Вот пример того, что вы могли бы сделать: 

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

      ...
   }

Надеюсь, это поможет!

0 голосов
/ 29 ноября 2018

display не является допустимым атрибутом html, это свойство CSS.

Так что установка display="none" на вашем <li> в этом примере ничего не делает.

Вместо этого в вашей разметке вам нужно установить встроенный стиль CSS, напримерэто для первоначального скрытия элемента: 

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

И в вашей функции измените этот встроенный стиль CSS следующим образом: 

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