Question

昨天点击每个按钮时，我遇到了麻烦的事情。

感谢来自stackoverflow“j08691”的用户，此问题已得到解决。但是，我无法弄清楚如何制作内容以淡入淡出＆amp; amp;取决于每个。

JS Fiddle

帮助我的用户在我的问题中没有看过这个。也许别人可以帮助我。

CSS和HTML示例元素已添加到小提琴中。我只是不知道如何让它发挥作用。

例如，在小提琴中我们有按钮A，B，C和D.

如果单击“A”，它会上升并显示<div id="letterA">Letter A opened-content.</div>。如果再次单击按钮A，它将再次消失。（fadeIn＆amp; fadeOut）。

如果按钮“A”处于活动状态且单击任何其他按钮B，C或D，则再次按钮A将淡出显示内容，并且将显示其他单击按钮。

解释起来非常简单，但很难让它发挥作用。

提前致谢。

Answer 1

这是一个解决方案：http://jsfiddle.net/KQ3sq/1/

我不得不稍微改变标记。我们的想法是将每个li与其目标div相关联。为此，我使用HTML5数据属性。您还可以考虑将一个带锚点的链接添加到相应的div（没有JS时回退）。

然后JS做的魔法就是：

var target = $(this).data('target');    
$("#content").children(target).fadeIn().siblings().fadeOut();

Answer 2

更新@MarvinLabs：D

var target = $(this).data('target');    
            $("div#collapseContent").children(target).fadeIn().siblings().fadeOut();
            if($(this).height() != 15 ) $("div#collapseContent").children(target).fadeOut();

它可以工作，但我不确定这是好还是可以更好。所以，如果有更好的解决方案，请更新您的答案或在此回复;）

再次欢呼和谢谢。

fadeIn / fadeOut指定和不同的按钮单击

2 个答案: