jquery -切换点击功能，不工作在单一点击.但它可以在双击 - Jquery-toggle on click function ,does not work on single click. But it works on double click

嗨，我有一些问题与切换功能，它的工作只在双击而不是单次点击，所以谁能帮助我在这个。

下面是我的HTML代码:

    <div class="search_result_per_page">
    <dl class="selectcsdd perpage">
    <dt>
    <a href="javascript:void(0);" rel="nofollow">
    <span id="dropdownArrow" class="close">Items per page</span>
    </a>
   </dt>
   <dd>
   <ul style="display: none;">
  <li>
  <li>
  <li>
  </ul>
  </dd>
  </dl>
  </div>

我想切换UL当我点击span id="dropdownArrow"。但它只能在双击时切换。为此编写的Jquery代码如下:

    $(document).ready(function($)
       {
          $(".selectcsdd.perpage dt a").click(function() { 
                $(".selectcsdd.perpage dd ul").toggle(function(){               
            var arrow = $(".selectcsdd.perpage #dropdownArrow").attr('class');
                if(arrow=='close'){
                $(".selectcsdd.perpage #dropdownArrow").attr('class','open');
            }
            else if(arrow=='open'){
                $(".selectcsdd.perpage #dropdownArrow").attr('class','close');
            }
        });
    });
    $(".selectcsdd.sortby dt a").click(function() {
        $(".selectcsdd.sortby dd ul").toggle(function(){
            var arrow = $(".selectcsdd.sortby #dropdownArrow").attr('class');
            if(arrow=='close'){
                $(".selectcsdd.sortby #dropdownArrow").attr('class','open');
            }
            else if(arrow=='open'){
                $(".selectcsdd.sortby #dropdownArrow").attr('class','close');
            }
        });
    });
    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("open"))
            $(".selectcsdd.perpage dd ul").hide();
            $(".selectcsdd.sortby dd ul").hide();
    });
});

任何想法?

您正在同一元素上使用.click()和.bind('click')，这似乎会导致问题。如果你删除.bind()，它工作良好

试试这个:

$(document).ready(function($) {
    $(".selectcsdd.perpage dt a").click(function(e) { 
        $(".selectcsdd.perpage dd ul").toggle(function(){               
            var arrow = $(e.target).attr('class');
            if(arrow=='close'){
                $(".selectcsdd.perpage #dropdownArrow").attr('class','open');
            }
            else if(arrow=='open'){
                $(".selectcsdd.perpage #dropdownArrow").attr('class','close');
            }
            if (! e.class == 'open'){
                $(".selectcsdd.perpage dd ul").hide();
                $(".selectcsdd.sortby dd ul").hide();
            }
        });
    });
    $(".selectcsdd.sortby dt a").click(function() {
        $(".selectcsdd.sortby dd ul").toggle(function(){
            var arrow = $(".selectcsdd.sortby #dropdownArrow").attr('class');
            if(arrow=='close'){
                $(".selectcsdd.sortby #dropdownArrow").attr('class','open');
            }
            else if(arrow=='open'){
                $(".selectcsdd.sortby #dropdownArrow").attr('class','close');
            }
        });
    });
});

将click事件绑定到文档和链接导致错误。该链接将捕获事件，并将文档保留为空。既然事件只关心链接，为什么不在事件发生时处理所有的事情呢?

——lol迟到20分钟——