Невозможно отобразить только один div за раз в jQuery

Question

У меня есть список <ul id="project_menu"> элементов, расположенных вертикально слева, и каждый раз, когда элемент кликается из этого списка, div (project-details) медленно исчезает на в правой части экрана, чтобы отобразить больше информации. Теперь я хочу, чтобы только один div появлялся за раз, поэтому, если пользователь нажимает на элемент A, затем элемент B, затем элемент D, я хочу, чтобы все остальные divs исчезли, кроме последнего последнего щелчка (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'; 
    } 
} 

То, что я пытался сделать, это создать массив, который имеет весь пункт IdS, что пользователь щелкнул, и установить все отображения соответствующей диву, чтобы скрытый, за исключением последнего элемента массива, который отображается на экране.

Теперь, если я загружаю страницу и нажимаю php, соответствующий справа появляется справа. Если я затем нажму nodeJS, php div исчезнет и появится узел 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(); 
}); 

Answer 2

$('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 
} 

дать общий класс для всех дивы проекта. Здесь я получил как all_projects