#javascript #html #css
#javascript #HTML #css
Вопрос:
JavaScript
function hideSideMenu() {
if(document.getElementById("arrow-left").className === "arrow-left fa fa-arrow-left") {
var k = document.getElementsByClassName('menu-title');
for (var i = 0;i < k.length ; i ) {
/*k[i].style.display = 'none' ;*/
/*k[i].style.removeProperty('display') ;*/
}
var m =document.getElementsByClassName('spinner-ico');
for (var j = 0;j < m.length; j ) {
m[j].style.display = '' ;
}
document.getElementById('navbar').className="navbar-after-click";
document.getElementById('top-container').className="top-container-after-click";
document.getElementById('innerContnt').className="inner-content-after-click";
document.getElementById('footer').className="footer-after-click";
document.getElementById('logo').className="logo-after-click";
document.getElementById("arrow-left").className="arrow-left-after-click fa fa-bars";
}
else{
//echo("i'm working");
var k = document.getElementsByClassName('menu-title');
for (var i = 0;i < k.length ; i ) {
k[i].style.display = 'block' ;
}
var m =document.getElementsByClassName('spinner-ico');
for (var j = 0;j < m.length; j ) {
m[j].style.display = 'block' ;
}
document.getElementById('innerContnt').className="inner-content";
document.getElementById("arrow-left").className="arrow-left fa fa-arrow-left";
document.getElementById('footer').className="footer";
document.getElementById('top-container').className="top-container";
document.getElementById('logo').className="logo";
}
}
HMTL
<ul id="leftMenu" class="clearfix">
<li class="topmenu ltopmenu-display-event"><a href="http://qmsadm.local/dashboard"><span class="ico fa fa-fw
fa-dashboard
"></span><span id="menu-title"
class="menu-title">Dashboard</span></a></li><li class="topmenu
ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
fa fa-fw fa-globe
"></span><span id="menu-title" class="menu-title">Admin</span><span
class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a
href="http://qmsadm.local/admin/users"><span class="ico fa fa-fw
fa-users
"></span>Users</a></li><li><a
href="http://qmsadm.local/admin/roles"><span class="ico fa fa-fw
fa-user-md
"></span>Roles</a></li><li><a
href="http://qmsadm.local/admin/menu"><span class="ico fa fa-fw
fa-navicon
"></span>Manage Menu</a></li><li><a
href="http://qmsadm.local/admin/clients"><span class="ico fa fa-fw
fa-pagelines
"></span>Clients</a></li><li><a
href="http://qmsadm.local/admin/templates"><span class="ico fa fa-fw
fa-glass
"></span>Templates</a></li><li><a
href="http://qmsadm.local/admin/devreqs"><span class="ico fa fa-fw
fa-cloud-upload
"></span>Device Requests</a></li><li><a
href="http://qmsadm.local/admin/devices"><span class="ico fa fa-fw
fa-laptop
"></span>Devices</a></li></ul></li><li class="topmenu
ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
fa fa-fw fa-puzzle-piece
"></span><span id="menu-title" class="menu-title">App</span><span
class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a
href="http://qmsadm.local/app/counters"><span class="ico fa fa-fw
fa-ticket
"></span>Counters</a></li><li><a
href="http://qmsadm.local/app/displays"><span class="ico fa fa-fw
fa-desktop
"></span>Displays</a></li><li><a
href="http://qmsadm.local/app/kiosks"><span class="ico fa fa-fw
fa-hand-o-up
"></span>Kiosks</a></li><li><a
href="http://qmsadm.local/app/ads"><span class="ico fa fa-fw fa-film
"></span>Ads</a></li><li><a
href="http://qmsadm.local/app/category"><span class="ico fa fa-fw
fa-star
"></span>Category</a></li><li><a
href="http://qmsadm.local/app/subcategory"><span class="ico fa fa-fw
fa-star-half
"></span>Sub Category</a></li></ul></li><li class="topmenu
ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
fa fa-fw fa-pie-chart
"></span><span id="menu-title" class="menu-title">Reports</span><span
class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a
href="http://qmsadm.local/reports/token/detail"><span class="ico fa
fa-fw fa-th-large
"></span>Token Detail</a></li><li><a
href="http://qmsadm.local/reports/token/summary"><span class="ico fa
fa-fw fa-envelope-o
"></span>Token Summary</a></li><li><a
href="http://qmsadm.local/reports/counter/detail"><span class="ico fa
fa-fw fa-pencil-square-o
"></span>Counter Detail</a></li><li><a
href="http://qmsadm.local/reports/counter/summary"><span class="ico fa
fa-fw fa-briefcase
"></span>Counter Summary</a></li><li><a
href="http://qmsadm.local/reports/regusers"><span class="ico fa fa-fw
fa-dedent
"></span>Registered Users</a></li><li><a
href="http://qmsadm.local/reports/admin/activities"><span class="ico
fa fa-fw fa-clipboard
"></span>Admin Activities</a></li></ul></li><li class="topmenu
ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
fa fa-fw fa-gears
"></span><span id="menu-title" class="menu-title">Settings</span><span
class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a
href="http://qmsadm.local/settings/personal"><span class="ico fa fa-fw
fa-columns
"></span>Personal</a></li><li><a
href="http://qmsadm.local/settings/language"><span class="ico fa fa-fw
fa-bold
"></span>Language</a></li><li><a
href="http://qmsadm.local/settings/client"><span class="ico fa fa-fw
fa-male
"></span>Client</a></li></ul></li><li class="topmenu
ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
fa fa-fw fa-anchor
"></span><span id="menu-title" class="menu-title">Super</span><span
class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a
href="http://qmsadm.local/super/activities"><span class="ico fa fa-fw
fa-pencil
"></span>Activities</a></li></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li>
</ul>
</li>
</ul>
В приведенном выше коде я пытался скрыть пункты меню onclick . я попробовал следующие вещи.
k[i].style.display = 'none';k[i].style.display = "";k[i].style.removeProperty('display') ;
В приведенных выше трех вариантах для меня работает только first one( display='none' ) . но проблема заключается в том, что при отображении кода после скрытия с использованием display="none" некоторых стилей меняются (отступы, поля и т. Д.). Как я могу это исправить?
Комментарии:
1. попробуйте использовать jquery, потому что у него больше возможностей. более приятные обработчики. и это более плавно из синтаксиса.
Ответ №1:
Я не уверен, понял ли я вас, есть куча кодов без живой демонстрации, но если вы говорите, что при повторном отображении некоторые реквизиты изменяются, попробуйте добавить в свой код следующее, чтобы убедиться, что:
if(display ! == none) {//you can hide now}
Это заставит код запускаться только тогда, когда элементы будут видны
Комментарии:
1. я не добавил живую демонстрацию, потому что она также содержит часть php, я не вижу части для добавления php-кода в сниппет. я не понимаю, что вы имеете в виду, можете ли вы что-нибудь объяснить?
2. я добавил html-код, чтобы понять, что указывает имя класса
3. Вы сказали, что первый вариант работает только в первый раз, после этого вы вносите больше изменений, чем необходимо. Попробуйте сделать следующее, внесите изменения только при необходимости. Думайте, что ваш код похож на коробку. Если окно закрыто, откройте его, но если окно уже открыто, не делайте то же самое снова.
if()Цикл предотвратит выполнение вашего кода во второй раз, если будут сделаны изменения4. я отредактирован, ожидая, что вы понимаете реальную проблему