Jquery-toggle单击功能，单击不起作用。 但它可以双击

Question

Hi, im having some problem with toggle functionality,its working only on double click not on single click,so can anyone help me on this .

Below is my HTML code:

    <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>

I want to toggle UL when I click on span id="dropdownArrow" . But it only toggles on the double click. The Jquery code written for this is as follows.

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

Any idea?

Answer 1

You are using .click() and .bind('click') on the same element which which seems to be causing an issue. If you remove the .bind() it works fine

Answer 2

Try this:

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

Having the click event bound to the document and the link was causing the error. The link would catch the event and leave the document with nothing. Since the event is only concerned about the links why not just handle everything when the event occurs?

--lol 20 minutes late--