это может быть не самый простой способ, но вы могли бы упомянуть все уникальные элементы в массиве, затем запустить проверку, чтобы увидеть, является ли элемент внутри элемента, на который вы нажали, дочерним, а затем переключить отображение нет .
Если это не прямой дочерний элемент, тогда запустите проверку, чтобы увидеть, активен ли 'd-none' или нет, затем переключите его.
Вероятно, есть гораздо более простой способ, но этот ответ основан на предположении, что вы сохраняете HTML таким, какой вы есть.
var arrayOfElements = [$("#txt"), $("#txt2"), $("#txt3")];
$('#techfolder, #persfolder, #linkfolder').click(function(){
checkDisplayNone($(this));
});
function checkDisplayNone(elem) {
innerElem = elem.children();
for (i = 0; i < arrayOfElements.length; i++) {
if (innerElem[0].id !== arrayOfElements[i][0].id) {
if (!arrayOfElements[i].hasClass('d-none'))
arrayOfElements[i].toggleClass('d-none');
} else {
arrayOfElements[i].toggleClass('d-none');
}
}
}
#techfolder {
width: 100px;
height: 100px;
background: red;
margin: 1rem;
}
#persfolder {
width: 100px;
height: 100px;
background: blue;
margin: 1rem;
}
#linkfolder {
width: 100px;
height: 100px;
background: green;
margin: 1rem;
}
.d-none {
display: none;
}
<html>
<div id="techfolder">
<div id="txt" class="d-none">
text
</div>
</div>
<div id="persfolder">
<div id="txt2">
text
</div>
</div>
<div id="linkfolder">
<div id="txt3">
text
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</html>