1

I don´t work much with javascript and I googled a lot the last few hours to figure out my problem. I guess I just don´t know the right words to search for.

This is what I want to achieve. A list of Links with a small arrow next to it. When you click on a link, a hidden div is shown and the arrow should move down to show that the text is "open". When I click on another text, the arrow should move up again and the div should be hidden. The other div would open accordingly. But the code is still a bit buggy. When I click on a link it gets the class "expanded" - but this class is not being automatically removed when I click on another item.

Here is my code so far... It doesnt work at all on jsfiddle, don´t know why 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'; };
   }

And this is an example of what I want to archieve. The only difference is that I want an open item to close once another is opened: https://www.facebook.com/help/473865172623776/

I hope you understand my question and can help me Thank you very much!!

4

3 回答 3

0

我想这就是你要找的。只需隐藏所有包含的 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/

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

于 2013-02-06T18:29:34.377 回答
0

您的 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 为所有锚标记添加了一个单击事件处理程序，该处理程序调用 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 标签都展开了。

于 2013-02-06T18:11:30.440 回答
0

使用 jsFiddle 中的 HTML，下面的 jQuery 应该可以按预期工作：

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

只要您.open在 CSS 中声明该类：

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

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

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

于 2013-02-06T18:17:58.300 回答