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

Show/Hide multiple Divs with changing classes for trigger

本文关键字：触发器 隐藏 Div 显示      更新时间：2023-09-26

我不怎么使用javascript，在过去的几个小时里我在谷歌上搜索了很多来解决我的问题。我想我就是不知道该找什么合适的词。

这就是我想要实现的。一个链接列表，旁边有一个小箭头。当你点击一个链接时，会显示一个隐藏的div，箭头应该向下移动以显示文本是"打开的"。当我点击另一个文本时，箭头应该再次向上移动，div应该被隐藏。另一个div将相应地打开。但是代码仍然有点bug。当我点击一个链接时，它会使类"展开"——但当我点击另一个项目时，这个类不会被自动删除。

这是我迄今为止的代码。。。它在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/

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

您的toggleClass（）调用正在将类添加到单击的类中，但我看不到您删除了上次单击的类。我想做的是：

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

EDIT：工作示例

我在jsFiddle中花了一些时间，得到了这个工作示例（警告，jsFiddler似乎在IE8中不起作用，所以使用FireFox或Chrome来查看这个示例）。

首先，我放弃了的显示：none'，因为不再需要它了。

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

最后，我重新编写了JS，使其更具jQuery风格。我制作了一个函数，根据它是否找到了一个带有类切换的锚标记来显示或隐藏div，该标记也扩展了类。然后，我再次使用jQuery向所有锚标记添加了一个点击事件处理程序，它调用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标签都被扩展了。

使用jsFiddle中的HTML，下面的jQuery应该可以正常工作：

$('a.toggle').on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('expanded').next('div').toggleClass('open');
});

只要您在CSS:中声明.open类

ul.fade_text li div.open { display: block; }

更新的小提琴：http://jsfiddle.net/DvH75/3/

此外，您不需要使用不引人注目的脚本在<a>标记上使用onclick="showdiv('astro-1'); return false;"。

我想这就是您想要的。只需隐藏所有包含的div并显示当前的div即可。你不需要跟踪最后一个。

$(function() {
$(".fade_text .toggle").on("click", function (e) {
    e.preventDefault();
    $(".fade_text div").hide();
    $(".fade_text .toggle").removeClass("expanded");
    $(this).addClass("expanded").next("div").show();
});
});

Fiddle：http://jsfiddle.net/4JFcK/4/

编辑：点击也删除所有扩展的锚点

相关文章：