jQuery - 单击后显示一个 div 并关闭其他答案

【问题标题】：jQuery - after click show one div and close otherjQuery - 单击后显示一个 div 并关闭其他
【发布时间】：2014-04-18 07:32:19
【问题描述】：

我正在构建我的个人网站，但遇到了挑战。我想对那些比我更熟悉 jQuery 的人来说不会（不难）;)

结构：

<a href>one</a>
<div id="hidden_one></div>

<a href>two</a>
<div id="hidden_two></div>

<a href>three</a>
<div id="hidden_three></div>

<a href>four</a>
<div id="hidden_four></div>

等等。换句话说，每个“a”都会一直显示，并在下方附加一个 div。

动作：

点击任意“a”后：

如果单击“a”，则下面显示 div - 关闭 div

如果单击“a”，下方没有显示 div，但显示了其他 div - 隐藏这些 div 并显示附加到此“a”的那个。

如果没有显示 div - 显示附加到这个“a”的那个。

我将不胜感激！ :)

【问题讨论】：

标签： jquery css html hide show

【解决方案1】：

试试这个

$('a').on('click',function(e) {
    e.preventDefault();
    $(this).next('div').slideToggle().siblings('div').hide();
});

DEMO

【讨论】：

【解决方案2】：

最好使用 href 标签：

HTML：

<a href="hidden_one">one</a>
<div id="hidden_one">Hide 1</div>

<a href="hidden_two">two</a>
<div id="hidden_two">Hide 2</div>

<a href="hidden_three">three</a>
<div id="hidden_three">Hide 3</div>

<a href="hidden_four">four</a>
<div id="hidden_four">Hide 4</div>

JavaScript：

    $('a').on('click',function(e) {
        e.preventDefault();
        var href = $(this).attr("href");
        $("#" + href).slideToggle().siblings('div').hide();
    });

DEMO

【讨论】：

【解决方案3】：

好吧，您可以通过简单快捷的方式来做到这一点。或者你付出一些额外的努力，建立良好的 HTML 并确保安全。看这里：http://jsfiddle.net/veritas87/qLPge/2/

$(document).ready(function(){
    $('a.clickme').on('click', function(e){
       $('div.active').removeClass('active').fadeOut();
       $(this).next('.showme').addClass('active').fadeIn(); 
       e.preventDefault();
    });
});

【讨论】：

【解决方案4】：

谢谢！它的作用就像魅力:)

我做了一个小修改：

$('a').on('click',function(e) {
    e.preventDefault();
    var href = $(this).attr("href");
    $("#" + href).slideToggle().siblings('div').slideUp();
});

http://jsfiddle.net/4qTeD/2/

【讨论】：