Question

搜索脚本，可以在没有框架的情况下显示/隐藏功能。

类似的东西：

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

.toggle { display: none; }

单击.toggle后应显示阻止span。就像jQuery上的toggle()一样。

感谢。

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

我会创建两个使用本机JavaScript添加/删除toggle类的方法：

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

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

您需要将onclick事件放在跨度上的代码。你熟悉吗？

Answer 3

这使用隐藏块上的id来确定要切换的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
    );
}

在你的HTML中没有JS。

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'的元素，但你可以使用你需要的任何东西来获得一个元素。然后，我们将toggle函数粘贴到一个全局变量中。

// 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的元素。

显示/隐藏没有框架

5 个答案: