显示/隐藏多个Divs并更改触发类

Question

我在javascript上工作​​不多，最近几个小时我在Google上搜索了很多，以找出我的问题。 我想我只是不知道要搜索的单词。

这是我想要实现的。 链接列表，旁边有一个小箭头。 当您单击链接时，将显示一个隐藏的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中，并得到了这个有效的示例 （警告，jsFiddler在IE8中似乎不起作用，因此请使用FireFox或Chrome浏览该示例）。

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

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

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

Answer 2

使用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/

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

Answer 3

我认为这就是您要寻找的。 只需隐藏所有包含的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();
});
});

小提琴： http : //jsfiddle.net/4JFcK/4/

编辑：单击时还删除所有展开的锚点