Question

我正在尝试创建一个弹出式部分，其中包含一个表单，供有人在点击“邮件列表”链接时输入其电子邮件地址。＆＃39;麻烦的是，当我点击链接时，该部分不会出现。当我将其设置为悬停而不是单击时，它可以工作。我已经没有关于如何调试它的想法。我错过了什么？

HTML

<form class="mailing-list-input pull-right">
   <input type="text" placeholder="Email Address" class="mailing-list-input">
   <button class="mailing-list-btn">
     <img src="/assets/arrow.png" style="height: 12px; width: 12px; margin-right: 6px;">
   </button>
 </form>

 <footer class="footer footer-style">
   <section class="container pull-right">
     <ul class="list-inline btm-list">
       <li class="btm-menu-width">
         <a href="/" class="btm-menu-heading mailing-list">
             Mailing List
         </a>
       </li>
     </ul>
   </section>
 </footer>

.mailing-list-input

的CSS

.mailing-list-input {
 margin-right: 10rem;
 display: none;
 z-index: 98;
 position: fixed;
 bottom: 5rem;
 right: 0;
}

Jquery文件

$(document).ready(function() {

  $(".mailing-list").click(function() {
   $(".mailing-list-input").css('display', 'block');
 },
 function() {
   $(".mailing-list-input").css('display', 'none')
 })
})

Answer 1

click函数只接受单个处理函数。要实现所需的行为，请使用单个处理程序并toggle()该元素。试试这个：

$(".mailing-list").click(function(e) {
    e.preventDefault();
    $(".mailing-list-input").toggle();
});

Example fiddle

注意我还添加了preventDefault()来停止默认链接行为。

Answer 2

基于OP似乎试图做的事情，这应该是Javascript：

$(".mailing-list").click(function(e) {
    e.preventDefault();
    if ($(".mailing-list-input").css('display') === 'block') {
        $(".mailing-list-input").css('display', 'none');
    } else {
        $(".mailing-list-input").css('display', 'block');
    }
});

单击处理程序回调接受一个作为事件对象的参数，您可以在该对象上调用preventDefault来阻止事件在其生命周期中继续。然后，如果您希望链接在每次单击时切换元素，请检查元素是否可见，并相应地设置其值。

这是一个有效的fiddle

Jquery点击功能不起作用（显示隐藏部分）

2 个答案: