Question

首先，我现在已经广泛阅读了关于如何在div之外正确检测到点击或事件后隐藏div的常见问题;确实这影响了我的javascript代码。但我是一个新手，它没有工作，所以我希望你能帮助我。

其次，jfiddle - https://jsfiddle.net/u5uzexqk/ ...请注意，当点击搜索栏或确实按钮的任何部分时，按钮应显示;并且在检测到外部任何地方的点击时不显示。

在代码之前，我想指出我已经阅读了电子传播的内容，但是我不认为这是问题的缺失;如果是的话，我的道歉很多。

也许是因为我是Javascript的新手，我无法看到另一个问题的建议答案是如何帮助的; Jfiddle上最受欢迎的答案似乎相反 - 当再次点击菜单链接时删除菜单。

HTML

<body>


        <div id = "wrapper">
        <form action="" class="search-form">
            <div class="cell">
                <input type="text" name="q">
            </div>
            <div class="cell button-holder">
                <button type="submit" id="dropdownbutton">
                    <span>Search</span> 
                </button>    
            </div>
        </form>
        </div>



</body>

的Javascript

$("#wrapper").onclick(function (e){

document.getElementById('#dropdownbutton').style.visibility = 'visible';
}

$(document).mouseup(function (e)
{

var container = $("#wrapper");

if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    $("#dropdownbutton").hide();
}
});

});

Answer 1

您正在混合隐藏和显示的方法。如果您要使用.hide()，请在显示时使用.show()。

使用您的代码，对.hide()的调用会将样式设置为display: none，然后将您的原生 Javascript技术设置为显示按钮（其中还包含井号）在id document.getElementById('#dropdownbutton')中 - 在调用document.getElementById()时不要将它与jQuery的选择器混淆）只是为visibility: visible添加了一种样式。那些是不同的属性。

<button type="submit" id="dropdownbutton" style="display: none; visibility: visible;">
    <span>Search</span>
  </button>

另外，正如评论中指出的那样，没有jQuery方法 .onclick 。使用.click()。此外，在包装器按钮的单击处理程序之后缺少右括号。所以像这样更新它：

$("#wrapper").click(function(e) {
    $("#dropdownbutton").show();
}); // <- add parenthesis (and optional semi-colon) to terminate the function call

并且已经提到过，您应该等到DOM准备好访问元素。使用jQuery，使用document.ready()。

$(document).ready(function(readyEvent) {
    //interact with DOM
    //now that the DOM is ready
    //e.g. fetch elements by id attribute, add event handlers, etc.
});

请参阅以下代码段中的这些变化：

＆＃13;

$(document).ready(function() {
  $("#wrapper").click(function(e) {
    //document.getElementById('dropdownbutton').style.visibility = 'visible';
    $("#dropdownbutton").show();
  });

  $(document).mouseup(function(e) {
    var container = $("#wrapper");

    if (!container.is(e.target) // if the target of the click isn't the container...
      && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      $("#dropdownbutton").hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <form action="" class="search-form">
    <div class="cell">
      <input type="text" name="q">
    </div>
    <div class="cell button-holder">
      <button type="submit" id="dropdownbutton">
        <span>Search</span>
      </button>
    </div>
  </form>
</div>

＆＃13;

Answer 2

首先让我们指出代码中的一些问题：

jQuery中没有onclick这样的功能。要附加点击事件，您可以使用：$(...).click(callback)或$(...).on("click", callback)。
show的对位不是visibility = "visible"。 show使用display属性（show = display = "none"），其对位为hide（display = ""）。因此，请使用show和hide。
由于您已经在使用jQuery，为什么要使用document.getElementById，只需$("#id")即可。
而不是所有这些检查，以查看目标是否是包装器中的wrraper或其他内容，只需停止在包装器的事件侦听器内传播事件，以便它永远不会到达文档。
您应该将代码包装在加载事件$()中。在开始做任何事情之前确保所有东西都已加载。

$(function() {
  $("#wrapper").click(function(e) {
    $("#dropdownbutton").show();

    e.stopPropagation(); // if the event occur inside the wrraper, prevent it from bubbling up to the document and fires the bellow function
  });

  $(document).click(function(e) { // if the click target is the #wrapper (or something inside it) this event will never reach the document because of the stop propagation inside the above listener. So if this is fired then the target is not the wrapper, therefore we should hide the button
    $("#dropdownbutton").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="wrapper">
    <form action="" class="search-form">
      <div class="cell">
        <input type="text" name="q">
      </div>
      <div class="cell button-holder">
        <button type="submit" id="dropdownbutton">
          <span>Search</span> 
        </button>
      </div>
    </form>
  </div>
</body>

Answer 3

我会这样做：

$("document").ready(function(){
    $("#dropdownbutton").hide();
    $( "input[name=q]" ).on( "focus blur", function() {
        if($(this).is( ":focus" ) ){
            $("#dropdownbutton").show();
        }else{
            $("#dropdownbutton").hide();
        }
    });     
});

演示：http://codesheet.org/cs/wAnG3ofQ

Jquery隐藏并显示一个按钮

3 个答案: