Click and Toggle with jquery, 1 click delay

Asked

Viewed 60 times

0

I have a small problem that I don’t know how to solve, I have a div, that when I click on it it adds something with load(), and keeps alternating this event with toggle(), to add and remove also, only when I give the first click it doesn’t display immediately, only when I click a second time, then it starts to run normally the event click, follows the code:

$('.more .ico').click(function(){
    $('.more .toggle').toggle( 50, function(){
        $(this).load("frames/menu-drop.php");
    });
});
<div class="more">
    <div class="ico"></div>
    <div class="toggle"></div>
</div>

When you click on the ico, you should load() to . toggle

I understand why this occurs, but I do not know a way to solve, and in case someone suggests using the on('click') I have tried too.

javascript jquery

  • How is HTML? Maybe the problem is in the structure.

  • Already tried with . Trigger('click', Function(){});

  • 1

    puts an example of this behavior in jsfiddler or codepen

  • I’m gonna try Trigger now

  • With Trigger it is not working... Does not perform the action and no error appears on the console

  • I’ll put the example in codepen

  • But instead of load(), I’ll have to use it to hide the showing with css, but it’s the same thing, it’s the same event, because I’m not only having this problem with it, but when I use on('click') together with toggle and I even understand, I just don’t know how to solve

  • Well put there, only it works normally, I put exactly as it is in mine, but there works normally, but mine does not

  • I believe the problem lies in the fact that it is the load().

Show 4 more comments

1 answer

0

The problem that the toggle is "hiding" its div at the first click because it is visible. Use toggle can cause an unwanted state. Try using show() or fadein() in place of toggle. It makes no sense to call the load when you are hiding the div. To start the div hidden define the Visible: Hidden in the css class attribute .toggle or direct in attribute style

  • Face the toggle I used to be able to alternate the effect, when clicking loads the $(this). load("frames/menu-drop.php"); inside the div toggle. and when clicking again it hides. but with the Show, it works well to show.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.