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

まず、指定した要素に固有のトグル関数を作成する関数があります。次に、ウィンドウが読み込まれるのを待ち、読み込まれると、いくつかのトグル関数を作成します。この例では、id ='some_id'の要素があると想定していますが、要素を取得するために必要なものは何でも使用できます。次に、トグル関数をグローバル変数に固定します。

//指定された要素を切り替える関数を返します
関数makeToggleFunction（el）{
        var element = el;
        function（）を返す{
                if（element.style.display =='none'）
                        element.style.display='ブロック';        
                そうしないと
                        element.style.display='なし';

        };
}

window.addEventListener（'load'、on_window_load、false）;
var GLOBAL = {};
関数on_window_load（）{
        GLOBAL.toggle_element = makeToggleFunction（document.getElementById（'some_id'））;
}

その後、。を使用して、必要なときにいつでも要素を切り替えることができますGLOBAL.toggle_element()。

また、ページが読み込まれるのを待ちたい場合は、これがIEのコードだと思います。

document.addEventListener（ "DOMContentLoaded"、on_window_load、false）;

編集：

この関数を追加します（programatiqueによってメンションされたhttp://www.dustindiaz.com/getelementsbyclass/から）

function getElementsByClass（s​​earchClass、node、tag）{
        var classElements = new Array（）;
        if（node == null）
                ノード=ドキュメント;
        if（tag == null）
                タグ='*';
        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 ++;
                }
        }
        classElementsを返します。
}

次に、関数内に次を追加しますon_window_load。

GLOBAL.toggleable = new Array（）;
または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。

于 2010-07-02T17:56:48.273 に答える
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

toggleネイティブ JavaScript でクラスを追加/削除する 2 つのメソッドを作成します。

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 を切り替えるかを決定します。これは、クリック可能なスパンごとに 1 つのブロックを切り替えることを前提としています。イベント リスナ メソッドは 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 に答える