Ich muss zweimal für jQuery-Funktion klicken, um

Question

zu laufen, wenn die Bildschirmauflösung auf meiner Website die Breite eines Telefons oder iPad erreicht, dann habe ich es in eine Bar mit einem Bild verwandelt, wenn das geklickt wird, will ich ein bar, um mit der navbar herunter zu blättern, aber einfacher zu verwenden, aber es muss zweimal geklickt werden, damit die Funktion ausgeführt wird. Wenn jemand helfen könnte, wäre das toll !! :)

function onTogglePan() { 
 
    var clicks = $(this).data('clicks'); 
 
    if (clicks) { 
 
    $("#navhide").css("display", "block"); 
 
    $("#navhide").css("visibility", "visible"); 
 
    } else { 
 
    $("#navhide").css("display", "none"); 
 
    $("#navhide").css("visibility", "hidden"); 
 
    } 
 
    $(this).data("clicks", !clicks); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navshowmenu"> 
 
    <a id="showmenu" onclick="onTogglePan()"> 
 
    <img src="ico/ham.png" style="height: 52px; width: 52px; margin-left: 10px; margin-top: 10px; display: inline-block;"> 
 
    </a> 
 
    <button onclick="onTogglePan()">Drop</button> 
 
</div> 
 
<div id="navhide">I am #navhide</div>

Answer 1

Ich bin immer noch nicht sicher, was Sie suchen, aber ich versuche,

Dies ist zu erklären, was Sie tun können:

function onTogglePan() { 
    // since you don't set data-clicks per default the 
    // first value of clicks is false 
    var clicks = $(this).data('clicks'); 
    if (clicks) { 
     // clicks is true - show the bar 
     // this happens on second click 
     $("#navhide").css("display", "block"); 
    } else { 
     // clicks is false (hide the bar) 
     // this happens on first click 
     $("#navhide").css("display", "none"); 
    } 
    $(this).data("clicks", !clicks); 
}; 

Ich denke, Sie wollen, dass es andersherum. also, wenn Sie einfach die Bedingungen mit if (!clicks) anstatt if (clicks) wechseln, sollte es funktionieren. Wie auch immer, du brauchst vielleicht kein solches Attribut. Sie könnten auch die Sichtbarkeit überprüfen:

function onTogglePan() { 
    var nav = $('#navhide'); 
    // if is visible hide, otherwise show 
    var vis = (nav.is(':visible')) ? 'none' : 'block'; 
    nav.css("display", vis);   
}; 

Ihre updated example here See.

Answer 2

Sie dies bedeuten Sie? (Nur eine CSS-Lösung)

function onTogglePan() { 
 
    var clicks = $(this).data('clicks'); 
 
    if (clicks) { 
 
    $("#navhide").css("display", "block"); 
 
    $("#navhide").css("visibility", "visible"); 
 
    } else { 
 
    $("#navhide").css("display", "none"); 
 
    $("#navhide").css("visibility", "hidden"); 
 
    } 
 
    $(this).data("clicks", !clicks); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navshowmenu"> 
 
    <a id="showmenu" onclick="onTogglePan()"> 
 
    <img src="ico/ham.png" style="height: 52px; width: 52px; margin-left: 10px; margin-top: 10px; display: inline-block;"> 
 
    </a> 
 
    <button onclick="onTogglePan()">Drop</button> 
 
</div> 
 
<div id="navhide" style=" visibility: hidden;">I am #navhide</div>

Bitte hoch, wenn mich ist, kann ich nicht zu verstehen, wenn das Problem über den Doppelklick oder über das Navigationsmenü

ist

Answer 3

Entfernen Sie einfach Ihre [a] Tag und setzen Sie die id = „showmenu“ auf der Taste [] Tag