JScript style.visibility не работает - PullRequest
Новая
       7

JScript style.visibility не работает

0 голосов
/ 29 мая 2018

Это мой первый пост о stackoverflow, поэтому я прошу прощения за «ошибки».

Проблема: я должен сделать веб-интерфейс для системы CMS.Поэтому мне нужны строки меню, которые можно расширять / сжимать, чтобы освободить пространство для других опций и инструментов.Контракт работает нормально.И да, я знаю, что это не расширяется назад.Но это не моя проблема в настоящее время.Простое переключение может исправить это:)

Вот интересная часть HTML.Я не включаю CSS, так как не считаю это необходимым здесь.Я также не добавляю теги html и body, так как я думаю, что вы, ребята, все равно обнаружите ошибку:) 

    <container id="main">
      <div class="main-part left" id="menu-left">
        <button class="navigation-toggle bgcontain" onClick="lefttoggle()"></button>
        <ul>
          <li><div class="menuicon baseicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">base</p></li>
          <li><div class="menuicon cmsicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">cms</p></li>
          <li><div class="menuicon shopicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">shop</p></li>
          <li><div class="menuicon mamicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">mam</p></li>
          <li><div class="menuicon w2picon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">w2p</p></li>
          <li><div class="menuicon workicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">workflow</p></li>
          <li><div class="menuicon mailicon bgcontain"></div><div class="ul-vspacer" id="contract"></div><p id="contract">mail</p></li>
        </ul>
      </div>
      <div class="main-part center">
        <button class="navigation-toggle bgcontain"></button>
      </div>
      <div class="main-part right">

      </div>
    </container>

    <script>

      function lefttoggle() {
        //document.getElementById('menu-left').style.width = '60px';
        //document.getElementById('menu-left').style.minWidth = '60px';
        document.getElementById('contract').style.visibility = "hidden";
      }
</script>

Я хочу, чтобы div и p с идентификатором "contract" стали невидимыми, так как я хочууменьшите строку меню до значков.

Спасибо всем вам:)

Ответы [ 3 ]

0 голосов
/ 29 мая 2018

Вы не можете иметь несколько элементов с одинаковым идентификатором на странице.Так что поменяйте их на класс и используйте getElementsByClassName function 

<script>
function lefttoggle() {

    console.log("here")
    var elems = document.getElementsByClassName('contract')
 for (var i=0; i< elems.length; i++) {
elems[i].parentElement.style.visibility = "hidden"; 
}

  }
  </script>


<container id="main">
  <div class="main-part left" id="menu-left">
    <button class="navigation-toggle bgcontain" onclick="lefttoggle()">T</button>
    <ul>
      <li><div class="menuicon baseicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">base</p></li>
      <li><div class="menuicon cmsicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">cms</p></li>
      <li><div class="menuicon shopicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">shop</p></li>
      <li><div class="menuicon mamicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">mam</p></li>
      <li><div class="menuicon w2picon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">w2p</p></li>
      <li><div class="menuicon workicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">workflow</p></li>
      <li><div class="menuicon mailicon bgcontain"></div><div class="ul-vspacer contract"></div><p id="contract">mail</p></li>
    </ul>
  </div>
  <div class="main-part center">
    <button class="navigation-toggle bgcontain"></button>
  </div>
  <div class="main-part right">

  </div>
</container>
0 голосов
/ 29 мая 2018

getElementById не будет работать, так как он возвращает только один элемент DOM, я не пробовал это с документом с несколькими элементами с одинаковым идентификатором, но, вероятно, он вернет первый элемент.Вы можете использовать querySelectorAll и использовать идентификатор элемента с префиксом #, чтобы заставить ваш код работать - т.е. #contract, или более удобно добавить контракт к атрибуту класса элементов и использовать getElementByClassName.Обе функции возвращают массив элементов DOM, поэтому цепочка style.visibility напрямую не будет работать.Вы должны пройтись по результатам и установить стиль внутри цикла.Вот скрипка, которая может вам помочь:

https://jsfiddle.net/yan0zvb7/

0 голосов
/ 29 мая 2018

Используйте document.querySelectorAll вместо document.getElementById, иначе вы вернете только один товар.Но, поскольку вы ищете идентификатор и у вас может быть только один элемент с любым данным идентификатором, вы должны присвоить всем этим элементам класс и использовать document.getElementsByClassName.

...