Как использовать функцию click с помощью $ (this) для дочерних элементов с тем же классом?

Question

Я хочу создать раскрывающееся меню с указанием страны-> региона-> города. Первая ul открывается с щелчка на этом промежутке, а остальные настроены для отображения при наведении (код внизу).

<input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off"> 
<span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"></span> 
<ul class="dropdown-location-ul" id="dropdown-country" style="display:none;"> 
    <li class="dropdown-location-li"> 
     <strong>Deutschland</strong> 
     <ul class="dropdown-location-ul" style="display:none;"> 
      <li class="dropdown-location-li"> 
       <strong>Brandenburg</strong> 
       <ul class="dropdown-location-ul" style="display:none;"> 
        <li class="dropdown-location-li"> 
         <strong>Oranienburg</strong> 
        </li> 
        <li class="dropdown-location-li"> 
         <strong>Schwedt</strong> 
        </li> 
        ... 
       </ul> 
      </li> 
      <li class="dropdown-location-li"> 
       <strong>Berlin</strong> 
      </li> 
      ... 
     </ul> 
    </li> 
    <li class="dropdown-location-li"> 
     <strong>France</strong> 
    </li> 
    ... 
</ul> 

$('.dropdown-location-li').hover(function(){ 
    $(this).children('ul').css('left', $(this).parent('ul').width()+'px'); 
    $(this).children('ul').show(); 
}, function(){ 
    $(this).children('ul').hide(); 
}); 

Это работает просто отлично, и теперь мне нужно, чтобы сделать его по щелчку, чтобы изменить значение вблизи входа на название места внутри сильного тега. Я попробовал код ниже, но кажется, что $ (this) выбирает элемент и всех его родителей, но мне нужно получить местоположение только от того, на котором я нажал. Скажите, пожалуйста, как это сделать правильно? Может быть, у меня есть совершенно неправильный подход, чтобы сделать это, и мне нужно сделать все с id и т. Д., Но я просто хотел свести к минимуму повторение js.

$('.dropdown-location-li').click(function(){ 
    $('#srch-area').val($(this).children('strong').text()); 
    $('#dropdown-country').hide(); 
}); 

Это показано на консоли. Как вы можете видеть, когда я нажимаю на Ораниенбург, он также выбирает Бранденбург и Германию, которые являются родителями элемента, которого я нажал. console screenshot