Question

我正在构建我的个人网站，但我遇到了一个挑战。我想对那些比我更熟悉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。

如果没有显示div，请显示附加到此“a”的那个。

我将不胜感激任何支持！ :)

Answer 1

试试这个

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

DEMO

Answer 2

嗯，你可以轻松快捷地完成它。或者你付出了一些额外的努力，建立了良好的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();
    });
});

Answer 3

可能最好使用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

Answer 4

谢谢！它就像魅力一样：）

我做了一个小修改：

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

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

jQuery - 点击后显示一个div并关闭其他

4 个答案: