简单的可重用 JavaScript toggle() 脚本？

Question

我正在学习 JavaScript，但不知道如何处理可重用代码的简单 sn-p。

我需要一段代码来隐藏（）#body01、#body02、#body03、04,05 等（所有这些）。然后，当我单击 title01 时，它知道我想要切换（） body01。如果我点击title02，它将toggle() 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>

对不起，如果有人问过这个问题，我自己找不到也找不到。

谢谢！

Answer 1

您可以使用 jQuery 使用 toggle 方法来执行此操作：

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

Answer 2

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

$('[id^=title]').click(function(){

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

});

Answer 3

将类添加到您的 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();
});

这是accordion like jQuery functionality的演示

Answer 4

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

.hidden { 显示：无； }

    <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