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

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

Во-первых, есть функция, которая создаст уникальную функцию переключения для любого элемента, который вы ей даете.Затем мы ждем загрузки окна, а когда это происходит, мы создаем некоторые функции переключения.В этом примере мы предполагаем, что у вас есть элемент с 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);

РЕДАКТИРОВАТЬ:

Добавить эту функцию (из http://www.dustindiaz.com/getelementsbyclass/, как указано в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.

Answer 3

См. Это в действии.

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 4

Используется идентификатор скрытого блока, чтобы определить, какой 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, идет в сценариизаблокируйте в вашем HEAD или в отдельном файле .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 5

Я бы создал два метода для добавления / удаления класса toggle с собственным JavaScript:

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

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

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