2

リンクがクリックされたときに div を表示および非表示にするために、次の jQuery と HTML を使用しています。

ブラジルをクリックすると、div が正しく表示されます。ただし、アメリカをクリックすると、それも表示されますが、ブラジルは非表示になりません。

一度に 1 つの 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>
4

2 に答える 2

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');
    });
});

フィドル

于 2013-09-11T17:21:58.543 に答える
1

データバインディングで複雑すぎることをしていると思います。サンプルDEMOを確認していただけますか

これは仕事をします：

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

});

于 2013-09-11T17:24:51.253 に答える