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

修改

我刚读了你的评论，我想我现在更了解你的问题了。我认为这就是你要找的东西：

示例DEMO： 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(); });

Answer 2

我并不完全明白你想做什么，但也许toggle() function可以帮助你。因为其中一个用途是打开一个封闭的对象（显示：无 - >显示：阻止）并隐藏一个打开的对象（显示：阻止 - ＆gt;显示：无）

对象可以是例如（div）

Answer 3

假设您有类似以下的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

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

3 个答案: