4

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

就像是：

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

.toggle { display: none; }

.toggle单击 后应显示块span。就像toggle()在 jQuery 上一样。

谢谢。

4

5 回答 5

10

看这里创建一个 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';
  }
}
于 2010-07-02T16:18:43.563 回答
0

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

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

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

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

于 2010-07-02T16:15:15.390 回答
0

这使用隐藏块上的 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。

于 2010-07-02T16:21:47.410 回答
0

在行动中看到它。

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";
  }
}
于 2010-07-02T16:24:33.330 回答
0

首先，有一个函数可以为你给它的任何元素创建一个独特的切换函数。然后，我们等待窗口加载，当它加载时，我们创建一些切换函数。在这个例子中，我们假设你有一个 id='some_id' 的元素，但是你可以使用任何你需要的东西来获取一个元素。然后，我们将切换函数粘贴到一个全局变量中。

// 返回一个切换给定元素的函数
函数 makeToggleFunction(el) {
        变量元素 = el;
        返回函数（）{
                if (element.style.display == 'none')
                        element.style.display = '块';        
                别的
                        element.style.display = '无';

        };
}

window.addEventListener('load', on_window_load, false);
变量全球 = {};
函数 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 提及）

函数getElementsByClass（搜索类，节点，标签）{
        var classElements = new Array();
        如果（节点==空）
                节点=文档；
        如果（标签==空）
                标签 = '*';
        var els = node.getElementsByTagName(tag);
        变量 elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        对于 (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                        类元素[j] = els[i];
                        j++;
                }
        }
        返回类元素；
}

然后在函数中添加以下内容on_window_load：

GLOBAL.toggleable = new Array();
或每个（getElementsByClass（'toggle'）中的var元素）{
        GLOBAL.toggleable.push(makeToggleFunction(element));
}
GLOBAL.toggle_all = function() {
        对于每个（GLOBAL.toggleable 中的 var f）{
                f.call();
        }
};

现在您可以调用GLOBAL.toggle_all()它，它将隐藏所有具有 class 的元素toggle。

于 2010-07-02T17:56:48.273 回答