Проблема с щелчком по внутреннему элементу при применении кода к его родительскому div в JQuery

Question

Я использую код для переключения панели поиска и она работает нормально. Я применил код к основному div (функция щелчка jQuery), переключая работу нормально, но внутри основного div присутствует тип ввода, если я нажимаю на него, я не знаю, почему функция переключения запущена и div закрывается. Я хочу прекратить переключение на его внутренний элемент (при нажатии на тип ввода)

HTML код:

                <li class="desk-search" id="jq-search-slider">
                <div class="block block-content search-drop" id="jq-search-drop" style="display: none;">
                    <form class="form minisearch active" name="searchform" id="search_mini_form" action="" method="get" onsubmit="return validateForm()">
                        <div class="field search">
                            <div class="control">
                                <input id="search" type="text" name="q" value="" placeholder="Search" class="input-text search-input" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off">

                                <div id="search_autocomplete" class="search-autocomplete"></div>
                            </div>

                        </div>


                    </form>
                </div>

            </li>

Вот код Jquery, который я использую:

        jQuery( "#jq-search-slider" ).click(function(){
        jQuery('#jq-search-drop').slideToggle();

    });

Answer 1

Используйте event.stopImmediatePropagation как показано ниже для типа ввода

$(document).ready(function() {
  $("#jq-search-slider").click(function() {
    $('#jq-search-drop').slideToggle();
  });
  
  $('#search').click(function (event) {
    event.stopImmediatePropagation();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="desk-search" id="jq-search-slider">
  <div class="block block-content search-drop" id="jq-search-drop" style="display: none;">
    <form class="form minisearch active" name="searchform" id="search_mini_form" action="" method="get" onsubmit="return validateForm()">
      <div class="field search">
        <div class="control">
          <input id="search" type="text" name="q" value="" placeholder="Search" class="input-text search-input" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off">

          <div id="search_autocomplete" class="search-autocomplete"></div>
        </div>

      </div>
    </form>
  </div>

</li>

Answer 2

Установить id="jq-search-slider" как отдельный div в списке.

jQuery("#jq-search-slider").click(function() {
  jQuery('#jq-search-drop').slideToggle();
});

li {
  list-style: none;
}

#jq-search-slider {
  background-color: blue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="desk-search">
  <div id="jq-search-slider">Toggle</div>
  <div class="block block-content search-drop" id="jq-search-drop" style="display: none;">
    <form class="form minisearch active" name="searchform" id="search_mini_form" action="" method="get" onsubmit="return validateForm()">
      <div class="field search">
        <div class="control">
          <input id="search" type="text" name="q" value="" placeholder="Search" class="input-text search-input" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off">
          <div id="search_autocomplete" class="search-autocomplete"></div>
        </div>
      </div>
    </form>
  </div>
</li>

Answer 3

попробуйте это:

  jQuery( "#jq-search-slider" ).click(function(){
    jQuery('#jq-search-drop').slideToggle();

});
jQuery( "input[type=text]" ).click(function(e){
    e.preventDefault();
    return false;
})