个人中心
gpt4 book ai didi

javascript - Jquery隐藏和显示按钮

转载 作者：行者123 更新时间：2023-12-01 04:02:20 26 4
gpt4 key购买 nike

首先，到目前为止，我已经广泛阅读了有关如何在正确检测到 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();
}
});

});

最佳答案

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

使用您的代码，调用 .hide()会将样式设置为 display: none，但随后您的 native 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.
});

在下面的代码片段中查看这些变化的实际效果:

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

关于javascript - Jquery隐藏和显示按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42100120/

26 4 0
文章推荐： php - 如何只刷新用户点击过的div
文章推荐： design-patterns - Poltergeist 反模式示例
文章推荐： jquery - 尝试拉取 json img 时未定义
文章推荐： regex - 使用正则表达式进行 proxypass
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com