javascript - 显示/隐藏多个 Div，并更改触发器的类

Question

我不太使用 javascript，在过去的几个小时里我用谷歌搜索了很多来找出我的问题。我想我只是不知道要搜索的正确词。

这就是我想要实现的目标。旁边有一个小箭头的链接列表。当您单击链接时，会显示一个隐藏的 div，并且箭头应向下移动以显示文本已“打开”。当我单击另一个文本时，箭头应该再次向上移动并且 div 应该被隐藏。另一个 div 也会相应地打开。但代码仍然有点错误。当我单击链接时，它会“扩展”类 - 但当我单击另一个项目时，该类不会自动删除。

到目前为止，这是我的代码...它在 jsfiddle 上根本不起作用，不知道为什么 http://jsfiddle.net/DvH75/

var _hidediv = null
   function showdiv(id) {
   if(_hidediv)
      _hidediv();
   var div = document.getElementById(id);
   div.style.display = 'block';
    $(".toggle").on("click", function(){
        $(this).toggleClass("expanded");
      });
   _hidediv = function () { div.style.display = 'none'; };
   }

这是我想要实现的一个示例。唯一的区别是我希望一个打开的项目在打开另一个项目后关闭: https://www.facebook.com/help/473865172623776/

希望您能理解我的问题并帮助我 非常感谢!!

Answer 1

您的toggleClass() 调用正在将类添加到单击的类中，但我没有看到您删除前一个单击的类。我会做的是这样的:

$('.expanded').each(function() {
    $(this).removeClass('expanded');
});

编辑:工作示例

我在 jsFiddle 上花了一些时间并得到了 this working example (警告，jsFiddler 似乎无法在 IE8 中运行，因此请使用 FireFox 或 Chrome 查看示例)。

首先，我从 main.css 中的 UL.fade_text li div 样式中删除了'display: none;'，因为不再需要它了。

接下来，我为所有 *div* 添加了类标记。我可能可以做其他事情，但这是一个快速但肮脏的例子。

最后，我重新编写了 JS，使其更加 jQuery 风格。我创建了一个函数，该函数将根据是否找到带有类切换的 anchor 标记来显示或隐藏 div，该类切换也扩展了类。然后，我再次使用 jQuery 将单击事件处理程序添加到所有 anchor 标记，该处理程序调用 showHideDivs() 函数。我还在 $(document).ready() 中添加了对 showHideDivs() 的调用，以便正确设置初始状态。

这是新的 JS 代码。它可能会被调整来优化一些事情，但它的工作原理就像我所期望的:

$(document).ready(function () {
    function showHideDivs() {
        $('.showHideDiv').each(function () {
            if ($(this).prevAll('a.toggle:first').hasClass('expanded')) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    $('a.toggle').click(function () {
        var addExpanded = !$(this).hasClass('expanded');
        $('a.toggle').removeClass('expanded');
        if(addExpanded) {
            $(this).addClass('expanded');
        }
        showHideDivs();
    });

    showHideDivs();
});

我认为这种方法的好处是，对于有 JS 问题或只是关闭 JS 的浏览器，它会优雅地降级。最终结果是这些人会看到所有 div 标签都展开了。