javascript - 无法在 jQuery 中一次只显示一个 div

Question

我有一个列表 <ul id="project_menu">左侧垂直堆叠的元素，每次从该列表中单击元素时，屏幕右侧都会慢慢淡入一个 div ( project-details ) 以显示更多信息。现在，我只希望一次出现一个 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.. -->

#php-project {
    background-color: #9b59b6;
    margin: 30px;
    display: none;
}

$(document).ready(function() {
    itemsToRender = [];
    $('ul#project_menu li').click(function(e) {
        menuItemId = (e.currentTarget.id);
        itemsToRender.push(menuItemId);
        var listSize = itemsToRender.length;              

        if (listSize > 1) {
            for (var i = 0; i < listSize - 1; i++) {
                currentItemId = itemsToRender[i];                
                $(getProjectId(currentItemId)).css('display', 'none');              
            }
            menuItemId = itemsToRender.pop();
            $(getProjectId(menuItemId)).fadeIn('slow');
        } else {
            $(getProjectId(menuItemId)).fadeIn('slow');
        }

        console.log(itemsToRender);
    });

    $('i.js-close-icon').click(function(e) { 
        projectId = (e.currentTarget.parentElement.id);
        console.log(projectId);    
        $('#' + projectId).fadeOut('slow');
    });
});

function getProjectId(menuItemId) {
    if (menuItemId.indexOf('php') > 0) { 
        return '#php-project';
    } else if (menuItemId.indexOf('node') > 0) {
        return '#node-project';
    } else if (menuItemId.indexOf('angular') > 0) {
        return '#angular-project';
    } else if (menuItemId.indexOf('mean') > 0) {
        return '#mean-project';
    }
}

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

现在，如果我加载页面并单击 php，相应的 div 会出现在右侧。如果我然后单击 nodeJS，php div 会消失，而 node div 会出现。如果我再次单击 php div，将出现 php div，并且它堆叠在节点 div 的顶部(它不会消失!)。我做错了什么？

Answer 1

这很简单，只需为所有元素分配一个类.common，然后当你想显示一个元素时，比如说#id3，你可以这样做如下。

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

此外，您还可以使用下面的回调函数进行增强。

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