Question

我有一些简单的jQuery代码，使用.slideToggle()函数使用另一个元素的click事件向下滑动元素：

＆＃13;

$(function() {

  $("#search_link").on('click', tapHandler);

  function tapHandler(event) {
    $('#search-div').slideToggle();
    setTimeout(function() {
      $('#search-text').focus().tap();
    }, 0);
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:;" tabindex="3" id="search_link">Search</a>

<div id="search-div">
  <input type="search" />
</div>

＆＃13;

此处此代码可以正常运行，但由于某种原因，我的网站会在点击后立即向上滑动。什么可能导致这个问题？ Here is my site，请点击搜索图标重现错误。

更新

我认为问题在于jquery.mmenu。如果我删除这部分：

 $(document).ready(function() {
    $("#menu").mmenu({
       "extensions": [
          "pageshadow"
       ],
       "header": {
              "title": "Menu",
              "add": true,
              "update": true
           }
    });
 });

它立即开始工作。

Answer 1

您的代码是正确的，并且不会导致此处显示的问题http://jsfiddle.net/mgfwejt8

         $(function() {

  $("#search_link").on('click', tapHandler);

  function tapHandler( event ) {
    $('#search-div').slideToggle();
    setTimeout(function(){
     $('#search-text').focus().tap();
    },0);
  }

});

您的问题似乎存在于此文件中

catalog / view / javascript / jquery / colorbox / jquery.colorbox.js

如果删除此文件，则功能正常。

Answer 2

看看它当前是如何工作的，好像你在同一个对象上有两个监听器。您的代码是否在某处重复？

$(function () {
    $("#search_link").on('click', tapHandler);
    function tapHandler(event) {
        $('#search-div').slideToggle();
        setTimeout(function () {
            $('#search-text').focus().tap();
        }, 0);
    }
    
    $("#search_link").on('click', tapHandler2);
    function tapHandler2(event) {
        $('#search-div').slideToggle();
        setTimeout(function () {
            $('#search-text').focus().tap();
        }, 0);
    }

});

#search-div {
  display:none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:;" tabindex="3" id="search_link">Search</a>

<div id="search-div">
    <input type="search" />
</div>

事实上，它必须运行两次。如果我在您网站的控制台中输入：

$('#search_link').off('click');
$('#search_link').on('click', function(event){
    $('#search-div').slideToggle();
});

这一切都神奇地起作用......

Answer 3

以下是.slideToggle api修改后的代码段，用于模仿您的代码。尝试模拟该示例，首先省略其他操作，看看是否符合您的意图。希望这会有所帮助。

＆＃13;

 $("#search_link").click(function(event){
   $('#search-div').slideToggle();
 });

＆＃13;

div {
  width: 400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<button id="search_link">search link</button>

<div id="search-div">
  This is the paragraph to end all paragraphs.  You
  should feel <em>lucky</em>...
</div>

＆＃13;

.slidetoggle（）点击后立即向上滑动

3 个答案: