Question

嗨，我在切换功能方面遇到了一些问题，它只能点击双击而不是单击，所以任何人都可以帮我解决这个问题。

以下是我的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>

我想在点击 span id =“dropdownArrow”时切换UL。但它只在双击时切换。为此编写的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();
    });
});

有什么想法吗？

Answer 1

您在同一元素上使用.click()和.bind('click')，这似乎导致了问题。如果删除.bind()，则可以正常使用

Answer 2

试试这个：

$(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事件绑定到文档并且链接导致错误。链接将捕获事件并使文档没有任何内容。由于事件只关注链接，为什么不在事件发生时处理所有事情？

- 迟到20分钟 -

点击功能上的Jquery-toggle，单击时不起作用。但它适用于双击

2 个答案: