jquery - 我必须单击两次才能运行 jQuery 函数

Question

当我网站上的屏幕分辨率达到手机或 iPad 的宽度时，我将它变成一个带有图像的栏，当它被点击时，我希望一个栏与导航栏一起下降，但更容易使用但是必须单击两次才能运行该功能。如果有人能帮忙那就太好了!! :)

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

我仍然不确定你在找什么，但我试着解释一下

这就是你要做的:

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 .