Javascript 无法在jQuery中一次仅显示一个div

我在左侧有一个垂直堆叠的项目列表

，每次从该列表中单击一个项目时，屏幕右侧的一个div（

项目详细信息

）会慢慢淡入显示更多信息。现在，我只希望一次出现一个div，因此如果用户单击项目a、项目B、项目D，我希望所有其他div消失，除了最后单击的一个（D）。为此，我用jQuery编写了自己的代码，但它不起作用

以下是相关文件：

<div class="project">
    <ul id="project_menu" class="project_menu">
        <li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li>
        <li id="menu-nodejs" data-projectID="node-project">NodeJS</li> 
        <!-- more code -->
    </ul>
    <div class="project-detail">
        <div id="php-project">
            <i class="ion-ios-close-empty close-icon js-close-icon"></i>
            <div classs="project-text">
                <!-- data about project -->
            </div>
            <div id="node-project">
                <i class="ion-ios-close-empty close-icon js-close-icon"></i>
                <div classs="project-text">
                    <!-- data about project -->
                </div> 
                <!-- and so on.. -->

$（文档）.ready（函数（）{
itemsToRender=[]；
$（'ul#project#u menu li'）。单击（函数（e）{
menuItemId=（e.currentTarget.id）；
itemsToRender.push（menuItemId）；
var listSize=itemsToRender.length；
如果（列表大小>1）{
对于（var i=0；i0{
返回“#php项目”；
}else if（menuItemId.indexOf（'node'）>0）{
返回“#节点项目”；
}else if（menuItemId.indexOf（'angular'）>0）{
返回“#角度项目”；
}else if（menuItemId.indexOf（'mean'）>0）{
返回“平均项目”；
}
}

我试图做的是创建一个数组，其中包含用户单击的所有项目ID，并将所有相应div的显示设置为隐藏，但数组的最后一个元素（即显示的元素）除外

---

现在，如果我加载页面并单击php，相应的div就会出现在右边。如果我单击nodeJS，php div就会消失，node div就会出现。如果我再次单击php div，php div就会出现，并堆叠在node div的顶部（不会消失！）。我做错了什么？

这很简单，只需为所有项目分配一个类

.common

，然后当您想要显示一个项目时，比如说

#id3

，您可以执行以下操作

// on event xyz....
jQuery(".common").hide();
jQuery("#id3").show();

此外，您还可以使用如下回调函数来增强

// on event xyz....
jQuery(".common").hide(function(){
 jQuery("#id3").show();
});

---

为所有项目div提供公共类。这里我给出的是所有的项目，毕竟

itemsToRender

pop

数组将为空。在

$（getProjectId（menuItemId））.fadeIn（'slow'）并且不需要使用任何数组。答案很简单。哇，你让我觉得自己像个傻瓜，因为我只需要写3行代码。干得好我完全可以理解，在我最初的日子里，我也习惯于做所有的欺骗和弯腰做简单的事情，但后来。。。我把箭射到膝盖上；）只是开玩笑，很高兴我的答案有帮助。很好的Skyrim参考，如果可以的话，我会再次投票。谢谢你（：
$('ul#project_menu li').click(function(e) {
   $project_id = $(this).attr("data-projectID"); //Get the project id wish to display
   $(".all_projects").hide(); //Hide all projects
   $("#"+$project_id).show(); //Show lastly clicked project
}