javascript - 在 JQuery 中将代码应用于其父 div 的内部元素单击问题

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

try this:

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

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