jquery隐藏并显示一个按钮

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

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

});

来源

2017-02-07 user1849962

因此，例如一半的JavaScript从这个有用的职位后来（在某些方面） - http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-i t – user1849962

对不起，你是说这应该被标记 - java？ – user1849962

现在排序，我希望 – user1849962

你混合了隐藏和显示方法。如果您要使用.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. 
});

看到这些变化，下面的代码片段：

$(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>

来源

2017-02-07 21:28:44

，似乎没有工作 – user1849962

谢谢;它在这jfiddle工作 - https://jsfiddle.net/528pxasg/ – user1849962

我不能让它在xamp中工作？我真的只是把它转移过来;有什么我需要添加 – user1849962

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

没有这样的在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>

来源

2017-02-07 21:40:53

嗨 - https://jsfiddle.net/ehds1r1w/。这似乎添加了无效的按钮？ – user1849962

@ user1849962这不是我的代码导致的问题。删除它，问题仍然存在！ –

@ user1849962这是因为你有这个'#dropdownbutton {0}：hidden：hidden; }'在你的CSS中。如果你想在开始时隐藏按钮，只需使用'$（“＃dropdownbutton”）。hide（）;'作为'$（）'中函数的第一行。像[** this **]（https://jsfiddle.net/mm8hv5oq/1/）！ –

我会做这样的：

$("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

来源

2017-02-07 22:21:44

它似乎没有在演示表中工作....虽然我喜欢宽度不变的事实;这就是我真正的追求 – user1849962

jquery隐藏并显示一个按钮

回答

相关问题