我必須點擊兩次jQuery功能才能運行

當我的網站上的屏幕分辨率達到手機或iPad的寬度時，我將它變成帶有圖像的條形圖，點擊時我想要一個欄與導航欄一起下拉，但更易於使用，但必須點擊兩次才能運行該功能。如果有人可以幫助它會很棒！ :)我必須點擊兩次jQuery功能才能運行

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>

來源

2017-01-13 Bailee

每默認點擊是假的，這意味着第一次點擊 - 隱藏，第二次點擊秀，你要什麼接收？爲什麼你改變顯示的可見性？如果顯示爲空，則可見性不起作用。 –

@ axel.michel默認情況下，當點擊按鈕時，移動導航欄是不可見的，我希望它可以被用戶看到。你介意告訴我你的意思嗎？謝謝你的回覆！ :) – Bailee

我仍然不知道你在找什麼，但是我試着解釋

這是你做什麼：

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

我猜你想它的其他方式輪。所以如果你只是使用if (!clicks)而不是if (clicks)來切換條件，它應該可以工作。無論如何，你可能不需要這樣的屬性。您還可以查看能見度：

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

查看您的updated example here。

來源

2017-01-13 08:29:59

你的意思嗎？（只是一個CSS的解決方案）

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>

請高大的我，如果是這樣，我不瞭解問題是關於雙擊還是關於導航菜單

來源

2017-01-13 08:26:45 Teshtek

只是刪除你的[A]標籤，並把ID =「showmenu」在你的[按鈕]標籤

來源

2017-01-13 08:39:40 vineeth

我必須點擊兩次jQuery功能才能運行

回答

相關問題