切换显示/隐藏分区

时间:2013-09-11 17:18:12

标签: jquery html

我在点击链接时使用以下jQuery和HTML来显示和隐藏div。

如果我点击巴西正确显示div,这效果很好。但是,如果我然后点击也显示的美国,但巴西没有被隐藏。

如何切换显示,以便一次只显示一个div ..?

$(document).ready(function() {
$('.toggle').prev().data('is_visible', true);
$('.toggle').hide();
$('a.togglelink').click(function() {
$(this).data('is_visible', !$(this).data('is_visible'));
$(this).parent().next('.toggle').toggle('slow');
return false;
    });
});

<ul id="list">
<li><a href="#" class="togglelink">America</a></li>
<div class="toggle" style="display: block;"><p>America - USA - the States</p></div>

<li><a href="#" class="togglelink">Brazil</a></li>
<div class="toggle" style="display: block;"><p>Brazil - Federative Republic of Brazil</p></div>
</ul>
</div>

2 个答案:

答案 0 :(得分:8)

首先修复标记,DIV不能成为UL的直接子女。

<ul id="list">
    <li>
        <a href="#" class="togglelink">America</a>
        <div class="toggle" style="display: block;">
            <p>America - USA - the States</p>
        </div>
    </li>
    <li>
        <a href="#" class="togglelink">Brazil</a>
        <div class="toggle" style="display: block;">
            <p>Brazil - Federative Republic of Brazil</p>
        </div>
    </li>
</ul>

然后做:

$(document).ready(function () {
    $('.toggle').hide();
    $('a.togglelink').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.toggle')
        $('.toggle').not(elem).hide('slow');
        elem.toggle('slow');
    });
});

FIDDLE

答案 1 :(得分:1)

我认为您的数据绑定过于复杂。 你可以查看我的例子DEMO

这样做:

$(document).ready(function() {   
$('.toggle').hide();
$('a.togglelink').click(function() {
    $('.toggle').hide();
    $(this).parent().next('.toggle').toggle('slow');
    return false;
});

});