简单的可重用JavaScript toggle(）脚本

Simple reusable JavaScript toggle() script?

本文关键字：toggle 脚本 JavaScript 简单      更新时间：2023-09-26

我正在学习JavaScript，不知道如何处理一个简单的可重用代码片段。

我需要的是一段代码，它将隐藏（）#body01、#body02、#bodi03、04,05等（所有这些）。然后，当我单击title01时，它明白我想切换（）body01。如果我单击title02，它将切换（）body02，依此类推。

<a id="title01">Title 1</a>
<div id="body01">Body content for Title 1</div>
<a id="title02">Title 2</a>
<div id="body02">Body content for Title 2</div>
<a id="title03">Title 3</a>
<div id="body03">Body content for Title 3</div>

很抱歉，如果有人问我这个问题，我自己也找不到，也弄不清楚。

谢谢！

如果你使用jQuery（如果没有，你应该使用），它就这么简单：

$('[id^=title]').click(function(){
    var tmp = $(this).attr('id').split("title");
    $('#body'+tmp[1]).toggle();
});

您可以使用toggle方法对jQuery执行以下操作：

$(function(){
  $("[id^=title]").click(function(){
    $(this).next().toggle();
    return false; // prevent moving down or going to link
  });
});

新的JS开发人员经常直接进入jQuery，而没有首先学习JavaScript作为一种语言。你肯定应该至少学习一些简单的JavaScript，这样你才能更好地理解和使用jQuery强大的功能。切换的最佳方式是设置和删除类，而不是在元素上设置样式属性。话虽如此，你可以做这样的事。

.hidden｛display:none；｝

    <div>
        <a id="title01" class="toggler">Title 1</a>
        <div class="body" id="body01">Body content for Title 1</div>
        <a id="title02" class="toggler">Title 2</a>
        <div class="body" id="body02">Body content for Title 2</div>
        <a id="title03" class="toggler">Title 3</a>
        <div class="body" id="body03">Body content for Title 3</div>
    </div>
    <script>
        // set your initial variables
        // ideally you will put these in a function which is not
        // exposed to the global object
        var togglers = document.getElementsByTagName('a'),
            divs   = document.getElementsByTagName('div'),
            i, j;
        // here you loop through your a elements and if they have
        // a class of toggler you assign the onclick event to a toggle function
        for ( i = 0; i < togglers.length; i += 1) {
            if (togglers[i].className == 'toggler') {
                togglers[i].onclick = toggle;
            }
        }
        function toggle() {
            // here you will cache the variable toToggle
            // which is the div you want to toggle
            var toToggle;
            // loop through all divs and if they have a class of body
            // you hide it
            for (j = 0; j < divs.length; j += 1) {
                if (divs[j].className == 'body') {
                    divs[j].className += ' hidden';
                    // this is tricky for a beginner. nodeType 1 is an element node
                    // nextSibling will get the nextSibling but if there is white space
                    // in your document it will return a text node when you have to toggle
                    // an element node. this just ensures that it will keep going until it
                    // finds and element node
                    if (this.nextSibling.nodeType !== 1) {
                        toToggle = this.nextSibling.nextSibling;
                    }
                    // then you toggle it by removing the hidden class
                    toToggle.className = 'body';
                }
            }
        }
    </script>
</body>

这里有几个链接指向nodeType和下一个同级节点。https://developer.mozilla.org/en/nodeType

https://developer.mozilla.org/En/DOM/Node.nextSibling

将类添加到DOM元素中，如下所示：

<a class="title" id="title01" href="">Title 1</a>
<div class="body" id="body01">Body content for Title 1</div>
<a class="title" id="title02" href="">Title 2</a>
<div class="body" id="body02">Body content for Title 2</div>
<a class="title" id="title03" href="">Title 3</a>
<div class="body" id="body03">Body content for Title 3</div>

然后你可以添加这样的切换功能：

$('.title').click(function(e){
    e.preventDefault();
    $(this).next('.body').toggle();
});

下面是类似手风琴的jQuery功能

的演示
相关文章：