Блог

Главная - Вопросы по программированию - Изменение скрипта show-hide, чтобы он работал в IE

Изменение скрипта show-hide, чтобы он работал в IE

#internet-explorer #cross-browser #show-hide

#internet-explorer #кроссбраузерный #показать-скрыть

Вопрос:

Я использую этот скрипт для отображения / скрытия разделов меню на моей странице, но, похоже, он не работает в Internet Explorer. Как я могу изменить код, чтобы он также работал в IE?

Я думаю, что это можно было бы сделать в Jquery гораздо проще с помощью функции переключения, но я хотел бы сохранить ту же структуру, кто-нибудь может мне помочь?

 visibleDiv1 = "";
visibleDiv2 = "";
visibleDiv3 = "";
visibleDiv4 = "";

function showHide1(elementid1){
  if (document.getElementById(elementid1).style.display == 'none'){
    document.getElementById(elementid1).style.display = '';
    if(visibleDiv1 != ""){
      if(visibleDiv1 != elementid1){
        document.getElementById(visibleDiv1).style.display = 'none';
      }
    }
    visibleDiv1 = elementid1;
  } else {
    document.getElementById(elementid1).style.display = 'none';

  }
}

function showHide2(elementid2){
  if (document.getElementById(elementid2).style.display == 'none'){
    document.getElementById(elementid2).style.display = '';
    if(visibleDiv2 != ""){
      if(visibleDiv2 != elementid2){
        document.getElementById(visibleDiv2).style.display = 'none';
      }
    }
    visibleDiv2 = elementid2;
  } else {
    document.getElementById(elementid2).style.display = 'none';
  }
}

function showHide3(elementid3){
  if (document.getElementById(elementid3).style.display == 'none'){
    document.getElementById(elementid3).style.display = '';
    if(visibleDiv3 != ""){
      if(visibleDiv3 != elementid3){
        document.getElementById(visibleDiv3).style.display = 'none';
      }
    }
visibleDiv3 = elementid3;
  } else {
    document.getElementById(elementid3).style.display = 'none';
  }
}

function showHide4(elementid4){
  if (document.getElementById(elementid4).style.display == 'none'){
    document.getElementById(elementid4).style.display = '';
    if(visibleDiv4 != ""){
      if(visibleDiv4 != elementid4){
        document.getElementById(visibleDiv4).style.display = 'none';
      }
    }
    visibleDiv4 = elementid4;
  } else {
    document.getElementById(elementid4).style.display = 'none';
  }
}

Ответ №1:

Это действительно плохо закодировано, вам нужно повторно использовать свой код и просто вызывать элементы, которые вы хотите скрыть. Вы создали функции для КАЖДОГО элемента.

Вы должны были выполнить основную функцию, подобную этой:

 function showHide(elementid, visibleDiv){
  if (document.getElementById(elementid).style.display == 'none'){
    document.getElementById(elementid).style.display = '';
    if(visibleDiv != ""){
      if(visibleDiv != elementid1){
        document.getElementById(visibleDiv).style.display = 'none';
      }
    }
    visibleDiv = elementid;
  } else {
    document.getElementById(elementid).style.display = 'none';

  }
}

а позже просто вызовите эту функцию, выполнив что-то вроде:

 showHide('id-of-your-element', 'visible-div-etc');

Я бы действительно посоветовал использовать jQuery, так как этот простой способ скрытия лучше поддерживается прямо из коробки, и вы можете сосредоточиться на других вещах. Используйте toggle() или просто простые .hide() / .show() функции.

Комментарии:

1. Намного лучше! Я пытался использовать скрипт Jquery, чтобы сделать то же самое, но у меня возникли проблемы с закрытием родственных разделов при нажатии на новый. Я действительно выяснил, в чем проблема с кодом, похоже, IE не любит идентификаторы, начинающиеся с цифр, поэтому я добавил к ним префикс, и теперь он функционирует.

2. ммм … имя / переменная (id / class) НЕ МОЖЕТ быть числом, его программированием переменная быть не может 12 = "hello" . Это здравый смысл.

3. @S3nd41, кстати, если вам понравился мой ответ, установите ЗЕЛЕНЫЙ флажок под кнопками голосования «Вверх» / «вниз».

4. Спасибо, я наконец-то разобрался, что происходит, это не имело к этому никакого отношения.