0

嗨，我的切换功能有一些问题，它只能在双击而不是单击时工作，所以任何人都可以帮助我解决这个问题。

下面是我的 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();
    });
});

任何想法？

4

2 回答 2

0

尝试这个：

$(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');
            }
        });
    });
});

将单击事件绑定到文档和链接导致错误。该链接将捕获该事件并使文档一无所有。既然事件只关心链接，为什么不在事件发生时处理所有事情呢？

--lol迟到20分钟--

于 2013-04-15T12:42:45.337 回答
0

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

于 2013-04-15T12:13:34.580 回答