jquery - onclick 在 jquery 中展开 div 并隐藏另一个 div

Question

当onclick展开时我应该怎么做，当点击另一个时关闭另一个或者将是一个很长的页面

<script language="javascript">
var ie4 = false;
if(document.all) { ie4 = true; }

function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) {
    var d = getObject(divId);
    if (d.style.display == \'\') { d.style.display = \'none\'; }
    else { d.style.display = \'\'; }
}

Answer 1

我没有完全理解你想要做什么，但也许toggle() 函数可以帮助你。因为它的用途之一是打开一个封闭的对象（显示：无 --> 显示：块）并隐藏一个打开的对象（显示：块 --> 显示：无）

对象可以是例如 (div)

Answer 2

假设你有一个如下的 HTML 结构：

<ul id="faqs">
    <li>
        <p class="heading">First FAQ question</p>
        <p>First FAQ answer</p>
    </li>
    <li>
        <p class="heading">Second FAQ question</p>
        <p>Second FAQ answer</p>
    </li>
    <li>
        <p class="heading">Third FAQ question</p>
        <p>Third FAQ answer</p>
    </li>
</ul>

我会使用这样的东西（因为你把这个问题放在 jQuery 类别中）：

$(document).ready(function() {
    $('#faqs > li > p:last-child').hide();
    $('#faqs > li:first-child > p:last-child').show();
    $('#faqs > li').on('click', function() {
        $('#faqs > li > p:last-child').hide();
        $(this).children('p:last-child').show();
    });
});

演示：http: //jsfiddle.net/TPPxP/12

Answer 3

编辑：

我刚刚阅读了您的评论，我想我现在更好地理解了您的问题。我认为这就是你要找的：

示例演示：http: //jsfiddle.net/mp2xn/1/

<ul>
    <li class="q">Question One</li>
    <li>first answer to question one</li>
    <li>second answer to question one</li>
    <li class="q">Question two</li>
    <li>first answer to question two</li>
    <li>second answer to question two</li>
    <li class="q">Question three</li>
    <li>first answer to question three</li>
    <li>second answer to question three</li>
</ul>

和jQuery代码：

$('li:not(".q")').hide();

$('li.q').click(
    function(){
        $('li:not(".q")').slideUp();
        $(this).nextUntil('.q').slideDown();
    });