jQuery;如何显示点击 div 并隐藏所有其他答案

【问题标题】：jquery; how do I show the click-on div and hide all the othersjQuery;如何显示点击 div 并隐藏所有其他
【发布时间】：2013-09-19 14:56:45
【问题描述】：

我正在尝试制作一个网页，您可以在其中单击按钮以显示和隐藏 div，我现在的问题是；

如何通过单击特定按钮隐藏所有其他 div。

代码Java：

function showHide(divId){
    var theDiv = document.getElementById(divId);
    if(theDiv.style.display=="none"){
        theDiv.style.display="block";
    }else{
        theDiv.style.display="none";
    }    
}

代码HTML：

    <div id="div" onclick="showHide('divcontent')"> This is the button. </div>

    <div id="divcontent"> This is a div to hide and show. </div>



    <div id="div2" onclick="showHide('divcontent2')"> This is the button. </div>

    <div id="divcontent2"> This is a div to hide and show. </div>



    <div id="div3" onclick="showHide('divcontent3')"> This is the button. </div>

    <div id="divcontent3"> This is a div to hide and show. </div>

因此，如果您单击 div2，我希望其他的显示为隐藏。

【问题讨论】：

看来您的做法是错误的。这是我猜您正在寻找的功能：jQuery Accordion
这个问题不需要在imo下投票
Accordion 肯定符合要求，但如果他需要在外观和感觉方面进行更多定制，则可能需要独立于 UI 库。

标签： javascript jquery html css onclick

【解决方案1】：

首先，添加一种方法来识别所有带有内容的 div 标签（通常使用类完成），如下所示：

<div id="div" onclick="showHide('divcontent')"> This is the button. </div>
<div class="content" id="divcontent"> This is a div to hide and show. </div>


<div id="div2" onclick="showHide('divcontent2')"> This is the button. </div>
<div class="content" id="divcontent2"> This is a div to hide and show. </div>


<div id="div3" onclick="showHide('divcontent3')"> This is the button. </div>
<div class="content" id="divcontent3"> This is a div to hide and show. </div>

然后，使用此功能显示/隐藏内容 div 标签：

function showHide(divId){

    $(".contents").not("#" + divId).hide();
    $("#" + divId).show();
}

这假设您在页面标题的某处正确地包含了 jQuery 库。

【讨论】：

【解决方案2】：

可能的一个：

function showHide(btn){   
    $(btn).next('.showhide').toggle().siblings('.showhide').hide();
}

DEMO

按照相关的 HTML：

<div onclick="showHide(this)">This is the button.</div>
<div class="showhide">This is a div to hide and show.</div>
<!-- etc... -->

【讨论】：

【解决方案3】：

通常你使用 CSS 类来做到这一点

<div id="div" class="toclick"> This is the button. </div>
<div id="divcontent" class="tohide"> This is a div to hide and show. </div>

<div id="div2" class="toclick"> This is the button. </div>
<div id="divcontent2" class="tohide"> This is a div to hide and show. </div>

<div id="div3" class="toclick"> This is the button. </div>
<div id="divcontent3" class="tohide"> This is a div to hide and show. </div>

使用 Jquery，您可以轻松访问您点击的对象：

$('.toclick').click(function(){
   var doNotDisappear =  $(this).attr('id'); //get id of div
   $('#'+doNotDisappear).next('tohide').removeClass('tohide');
   $('tohide').hide(); //make the other disappear
});

【讨论】：