показать/скрыть без рамки

Question

Поиск скрипта, который может показывать/скрывать функции без рамки.

Что-то вроде:

<span rel="toggle" href="/somelink.html">Title</span> 
<div class="toggle">Hidden block</div> 

.toggle { display: none; } 

Блок .toggle должен отображаться после нажатия на span. Как toggle() на jQuery.

Спасибо.

Answer 1

смотрите здесь, чтобы создать функцию getElementByClass - http://www.dustindiaz.com/getelementsbyclass/

потом что-то вроде этого (не проверял, работает ли это, но вы получите идею):

toggleItem = function(){ 
    var item = getElementByClass('toggle')[0]; 
    if (item.style.display == "block") 
    { 
    item.style.display = 'none'; 
    } 
    else 
    { 
    item.style.display = 'block'; 
    } 
} 

Answer 2

Я хотел бы создать два метода, добавить/удалить toggle класс с родной JavaScript:

function show(element) { 
    element.className += " toggle"; 
} 

function hide(element) { 
    element.className = (element.className).replace(/\s*toggle/g, ""); 
} 

Вам понадобится код, который помещает onclick событие на пролете. Вы знакомы с этим?

Answer 3

Это использует идентификатор на скрытый блок, чтобы выяснить, какой div для переключения. Это связано с предположением, что вы хотите переключить один блок за каждый кликабель. Метод прослушивателя событий является стандартом W3C, но я не уверен, что IE его реализует - сделайте некоторое тестирование, чтобы быть уверенным.

HTML:

<!-- the rel attribute in the span specifies which div to toggle --> 
<span rel="target" id="trigger">Title</span> 

<div id="target">Hidden block</div> 

JavaScript, идет в блок сценария в вашей голове или в отдельном файле .js:

window.addEventListener('load', init, false); 

function init() { 
    document.getElementById('trigger').addEventListener(
     'click', 
     function() { 
      targetId = this.getAttribute('rel'); 
      var element = document.getElementById(targetId); 
      if (element.style.display == 'block') 
       element.style.display = 'none'; 
      else 
       element.style.display = 'block'; 
     }, 
     false 
    ); 
} 

Там, нет JS в вашем HTML.

Answer 4

See it in action.

HTML

<span rel="hidden" href="/somelink.html" onclick="toggle(this)">Title</span> 
<div class="toggle" id="hidden">Hidden block</div> 

Javascript

function toggle(el) { 
    if (!el.getAttribute("rel")) return; 
    el = document.getElementById(el.getAttribute("rel")); 
    var cname = " " + el.className + " "; 
    if (cname.indexOf("toggle") !== -1) { 
    cname = cname.replace(" toggle ", " "); 
    el.className = cname.substring(1, cname.length-1); 
    } else { 
    el.className += " toggle"; 
    } 
} 

Answer 5

Во-первых, есть функция, которая создает уникальную функцию переключения для любого элемента вы даете ему. Затем мы ждем загрузки окна, и когда это произойдет, мы создаем некоторые функции переключения. В этом примере мы предполагаем, что у вас есть элемент с id = 'some_id', но вы можете использовать все, что вам нужно для получения элемента. Затем мы привязываем функцию переключения в глобальную переменную.

 
// returns a function that will toggle the given element 
function makeToggleFunction(el) { 
     var element = el; 
     return function() { 
       if (element.style.display == 'none') 
         element.style.display = 'block';   
       else 
         element.style.display = 'none'; 

     }; 
} 

window.addEventListener('load', on_window_load, false); 
var GLOBAL = {}; 
function on_window_load() { 
     GLOBAL.toggle_element = makeToggleFunction(document.getElementById('some_id')); 
} 

Вы можете затем переключить элемент всякий раз, когда вам нужно, с GLOBAL.toggle_element().

Кроме того, я думаю, что это код для IE, если вы хотите дождаться загрузки страницы.

 
document.addEventListener("DOMContentLoaded", on_window_load, false); 

EDIT:

Добавьте эту функцию (от http://www.dustindiaz.com/getelementsbyclass/ в mentioed по programatique)

 

function getElementsByClass(searchClass,node,tag) { 
     var classElements = new Array(); 
     if (node == null) 
       node = document; 
     if (tag == null) 
       tag = '*'; 
     var els = node.getElementsByTagName(tag); 
     var elsLen = els.length; 
     var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); 
     for (i = 0, j = 0; i < elsLen; i++) { 
       if (pattern.test(els[i].className)) { 
         classElements[j] = els[i]; 
         j++; 
       } 
     } 
     return classElements; 
} 

А затем добавьте следующий внутри функции on_window_load:

 
GLOBAL.toggleable = new Array(); 
or each(var element in getElementsByClass('toggle')) { 
     GLOBAL.toggleable.push(makeToggleFunction(element)); 
} 
GLOBAL.toggle_all = function() { 
     for each(var f in GLOBAL.toggleable) { 
       f.call(); 
     } 
}; 

И теперь вы можете позвонить GLOBAL.toggle_all() и скрыть все элементы, имеющие класс toggle.