2

Доброго времени! Собствено есть такой код:

window.onload=function(){

  $(".hidafi").click(function (el) { 

    $(el).children("ul").css('display','block');

  });

$(".hidafi").children("ul").children("li").click(function () { 
	

$(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">
    <ul style='display: none;'><li></li></ul>
  </li>
  <li class="hidafi">
    <ul style='display: none;'><li></li></ul>
  </li>
</ul>

По задумке он работает так: при клике на элемент с классом hidafi у его потомка ul свойство дисплей должно становиться в позицию block но почему то это не так, подскажите где ошибка?

0

1 ответ 1

4

Первый параметр в коллбэке функции 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>

6
  • Спасибо то что нужно! А не подскажите еще вот для обратного дейсвтия при клике на потомка скрывать этот список вот таким js как? $(".hidafi").children("ul").children("li").click(function () { $(this).parent("ul").css('display','none'); }); @Grundy
    – dantelol
    30 мая 2017 в 14:04
  • @dantelol, а твой код не работает? :-)
    – Grundy
    30 мая 2017 в 14:09
  • @Gundy такой нет почему то\
    – dantelol
    30 мая 2017 в 14:12
  • @dantelol, добавь этот пример в сниппет в вопросе, чтобы было видно где и как вызываешь
    – Grundy
    30 мая 2017 в 14:13
  • гтово) там же и вызываю)
    – dantelol
    30 мая 2017 в 14:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.