Отключить функцию переключения на определенном поле

Question

Из следующего кода содержимое сворачивается при нажатии на серую полосу и расширяется при повторном нажатии. На серой панели также есть поле ввода для поиска, но содержимое щелкало, когда я нажимал на него.

Я хочу отключить функцию переключения в поле ввода , но сохранить все остальное. Это означает, что когда я нажимаю на другие части серой полосы, переключатель все еще работает, кроме входных данных поиска. Это способ сделать это? Надеюсь, что некоторые из вас могли бы дать мне несколько советов. Спасибо!

$(".aq_epdtitle").click(function() {
  $('.aq_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.aq_expandct {
  padding: 5px;
  background-color: #aadfff;
}

.aq_epdtitle {
  background: #ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
  background-position: right 0px;
  cursor: pointer;
  padding: 0 10px;
  margin: 0;
  overflow: hidden;
}

.collapsed .aq_epdtitle {
  background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle">
      <div class="floatleft bold"><span>Pending Submission</span></div>
      <div class="floatright"><input class="searchapp" name="searchapp" type="text" value="" placeholder="Search application no." alt="Search application no." /></div>
      <div class="clear"></div>
    </div>
    <div class="aq_expandct">
      <p>content</p>
    </div>
  </li>
</ul>

Answer 1

Вы можете сделать это с помощью event.stopPropagation().

Я добавил еще одну функцию щелчка для ввода и добавил e.stopPropagation(). Это останавливает всплывающее событие.

$(".aq_epdtitle").click(function() {
  $('.aq_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".searchapp").click(function(e){
e.stopPropagation();
});

ul { list-style-type: none; margin:0; padding: 0; } 

.aq_expandct{
	padding : 5px;
  background-color: #aadfff;
}
	
.aq_epdtitle{
	background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
	background-position:right 0px;
	cursor:pointer;
	padding: 0 10px;
  margin: 0;
  overflow:hidden;
}
	
.collapsed .aq_epdtitle{
	background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

.floatleft{float:left;}
.floatright{float:right;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle">
      <div class="floatleft bold"><span>Pending Submission</span></div>
      <div class="floatright"><input class="searchapp" name="searchapp" type="text" value="" placeholder="Search application no." alt="Search application no."/></div>
      <div class="clear"></div>
    </div>
    <div class="aq_expandct">
      <p>content</p>
    </div>
  </li>
</ul>