I admit, this answer is based on @boris's idea... should I just try to modify his answer? I'm not that experienced with this subject on SO.
However, this is my answer:
$('li').click(function(e) {
var path = [];
var el = $(this);
do {
path.unshift(el.attr("id"));
el = el.parent().closest('li');
} while(el.length != 0);
alert(path.join('/'));
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<ul>
<li id="item1">item1</li>
<li id="item2">item2
<ul>
<li id="superitem1">superitem1
<ul>
<li id="eliteitem1">eliteitem1</li>
<li id="eliteitem2">eliteitem2</li>
</ul>
</li>
<li id="superitem3">superitem3</li>
<li id="superitem4">superitem4</li>
</ul>
</li>
<li id="item3">item3</li>
<li id="item4">item4</li>
</ul>
EDIT: Same JS as above - your HTML:
$('.expandable').click(function(e) {
var path = [];
var el = $(this).closest('li');
do {
path.unshift(el.attr("id"));
el = el.parent().closest('li');
} while(el.length != 0);
alert(path.join('/'));
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-unstyled">
<li id="mapdb1">
<a class="expandable">
<span class="foldername one">mapdb1</span>
<span class="glyphicon glyphicon-play"></span>
</a>
<ul class="list-unstyled">
<li id="somemap">
<a class="expandable">
<span class="foldername two">somemap</span>
<span class="glyphicon glyphicon-play"></span>
</a>
</li>
</ul>
</li>
<li id="mapdb2">
<a class="expandable">
<span class="foldername one">mapdb2</span>
<span class="glyphicon glyphicon-play"></span>
</a>
<ul class="list-unstyled">
<li id="mapjeinner">
<a class="expandable"><span class="foldername two">mapjeinner</span> <span class="glyphicon glyphicon-play"></span></a>
<ul class="list-unstyled">
<li id="anderemap">
<a class="expandable">
<span class="foldername three">anderemap</span>
<span class="glyphicon glyphicon-play"></span>
</a>
</li>
</ul>
</li>
<li id="mapjeinner2">
<a class="expandable">
<span class="foldername two">mapjeinner2</span>
<span class="glyphicon glyphicon-play"></span>
</a>
<ul class="list-unstyled">
<li id="nogmapje">
<a class="expandable">
<span class="foldername three">nogmapje</span>
<span class="glyphicon glyphicon-play"></span>
</a>
<ul class="list-unstyled">
<li id="supermapp">
<a class="expandable">
<span class="foldername four">supermapp</span>
<span class="glyphicon glyphicon-play"></span>
</a>
<ul class="list-unstyled">
<li id="eenhelelangemap">
<a class="expandable">
<span class="foldername five">eenhelelangemap</span>
<span class="glyphicon glyphicon-play"></span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
PS: Requires jQuery ≥ 1.3.0