Не срабатывает функция javascript

218

31 мая 2017, 05:25

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

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 но почему то это не так, подскажите где ошибка?

Answer 1

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как правильно очистить форму во Vue.js?

Подобный вопрос уже был, про сброс формы через метод reset() я знаюВ примерах по работе с Vue

845

jQuery

Не работает значение времени в hide(), show()

При использовании метода hide() или show(), страница не обращает внимание на скорость выставленную в круглых скобках, и в результате сразу скрывает...

290

jQuery

Найти одинаковые значения ключей

Помогите с цикломТуплю

349

jQuery

как передать массив через AJAX?

Ситуация такая, добавляю записи в БД с перезагрузкой, решил реализовать на AJAX, но тут ситуация такая что тут мне нужно передать массив

551