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并得到this working example（警告，jsFiddler似乎在IE8中不起作用，所以使用FireFox或Chrome查看示例。）

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

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

最后，我重新编写了JS更多的jQuery-ish。我创建了一个函数，它将显示或隐藏div，如果它找到一个带有类扩展的锚标记，并且还扩展了类。然后，我再次使用调用showHideDivs（）函数的jQuery向所有锚标签添加了一个click事件处理程序。我还在$（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/

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

显示/隐藏多个Div，其中包含更改触发器的类

3 个答案: