CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shubham Jaiswal
Shubham Jaiswal

Reputation: 118

Inner element clicking issue on applying code to its parent div in JQuery

I am using a code for toggling a search bar and its working fine. I applied a code on the main div (click function jQuery), toggling working fine but inside the main div a input type is present if I click on that I don't know why the toggling function started and div becomes close. I want to stop toggle on its inner element(on clicking on input type)

HTML Code:

                <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>

Here is the Jquery Code that I am using:

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

    });

Upvotes: 0

Views: 71

Answers (3)

Gerard
Gerard

Reputation: 15806

Set id="jq-search-slider" up as a separate div within the list.

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>

Upvotes: 0

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5051

Use event.stopImmediatePropagation like below for input type

$(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>

Upvotes: 1

Deepak Sharma
Deepak Sharma

Reputation: 91

try this:

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

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

Upvotes: 2

Related Questions