There is a drop-down list, implemented approximately as follows:

<ul> <li> <div class="block"></div> <p>Блок 1</p> <span> <b>Тут много текста</b> <input type="text" placeholder="ENTER HERE"> </span> </li> <li> <div class="block"></div> <p>Блок 2</p> <span> <b>Тут много текста</b> <input type="text" placeholder="ENTER HERE"> </span> </li> </ul>

There is some text in the list, and a form.

Js:

 $(function(){ $('ul li').click(function(){ $('span', this).toggle(); }); });

Now the problem is, if you click on the form, the list will immediately close, how to avoid it?

Also, using css, I added a triangle, which, when clicked, should rotate 180 degrees, how best to implement it?

Here is an example on jsfiddle

  • there is an inside there - splash58
  • I specifically laid out an example on jsfiddle so that there were no questions, when I clicked on the input list closes, the question is how to avoid it? Which page is reloading? - Alexander Reizan
  • and why not close, if you are on pressure. do togl when you click on some part - splash58
  • as an option, you can add an input click handler in which to call e.stopPropagation() - Grundy

2 answers 2

 $('input[type=text]').click(function(event){ event.stopPropagation(); });

When you click on the input list does not close

Add a class that turns the arrow

 $('.block', this).toggleClass('selected'); .selected { transform: rotate(270deg); transform-origin: 20px 8px; }

    Here is an example of working code: https://jsfiddle.net/z8c7effx/16/ .

     $(function(){ $('ul li').click(function(){ if(!$('input').is(':focus')){ $('span', this).toggle(); $('.block', this).toggleClass('selected'); } }) })