Первый параметр в коллбэке функции click - это не элемент, по которому кликнули, а объект событие.
Для решения стоит использовать вместо него this
window.onload = function() {
$(".hidafi").click(function() {
$(this).children("ul").css('display', 'block');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="hidafi">1
<ul style='display: none;'>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="hidafi">2
<ul style='display: none;'>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
Ответ на дополненный вопрос: из-за системы всплытия событий, в твоем случае после обработчика клика на внутренний li
событие всплывает и выполняется обработчик внешнего li
.
Чтобы этого избежать, можно воспользоваться объектом события, которое передается первым параметром, вызвав у него метод stopPropagation, либо вернуть false
из функции обработчика
Примеры
window.onload = function() {
$(".hidafi").click(function() {
$(this).children("ul").css('display', 'block');
});
$(".hidafi").children("ul").children("li").click(function(e) {
e.stopPropagation();
$(this).parent("ul").css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="hidafi">1
<ul style='display: none;'>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="hidafi">2
<ul style='display: none;'>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
window.onload = function() {
$(".hidafi").click(function() {
$(this).children("ul").css('display', 'block');
});
$(".hidafi").children("ul").children("li").click(function() {
$(this).parent("ul").css('display', 'none');
return false;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="hidafi">1
<ul style='display: none;'>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="hidafi">2
<ul style='display: none;'>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>