用jquery显示后div不隐藏答案

【问题标题】：Div doesn't hide after showing it with jquery用jquery显示后div不隐藏
【发布时间】：2014-05-28 10:31:19
【问题描述】：

我想显示和隐藏一个 div。单击跨度后显示 div 没问题，但是当我不想再次隐藏它时，它就不起作用了。

$('#first-search').click(function(){
    $('#first-search').find('.popup-search').addClass('show');
});

$('#submit-product').click(function(){
    $('.popup-search').removeClass('show');
    $('#first-search').find('.answer').text('Rolstoel');
});

这是 jQuery 脚本。类“答案”得到另一个文本的第二行正在工作。删除分配给 popup-search 的类不起作用。

HTML

<div id="first-search">
                Ik ben op zoek naar een <span class="answer">jouw antwoord</span>
                <div class="popup-search">
                    <form>
                        <input type="text" name="product" placeholder="Welk product zoek je?"> 
                        <div id="submit-product">Bevestigen</div>                       
                    </form>
                </div>
            </div>

CSS

#first-search{
    margin:0 0 20px 0;
    position:relative;
}

.answer{
    border-bottom:1px dotted #333;
    color:#333;
    cursor:pointer;
}

.popup-search{
    position: absolute;
    width: 250px;
    bottom: -122px;
    right: 320px;
    z-index: 100;
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    display:none;
    box-shadow: 0 7px 12px #879e30;
}

.show{
    display:block;
}     

#submit-product{
    padding: 6px 10px;
    width: 206px;
    margin: 10px auto 0 auto;
    border-radius: 4px;
    border: none;
    background-color: #b3d33a;
    color: #404041;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-size:12px;
    cursor:pointer;
}

【问题讨论】：

如果您需要帮助，请添加一个 jsfiddle :)
$('.popup-search').hide() 使用这个。

标签： jquery class hide show

【解决方案1】：

它失败了，因为点击#submit-product 也是点击#first-search，所以点击它会触发两个回调函数。解决方法是保存#submit-product 的悬停状态。只有当它没有悬停时，才将show 类添加到.popup-search。

这样的事情应该可以完成工作（未经测试）：

var submit_product_hovered = false;
$('#first-search').click(function() {
  if(!submit_product_hovered) {
    $('#first-search').find('.popup-search').addClass('show');
  }
});
$('#submit-product').click(function() {
  $('.popup-search').removeClass('show');
  $('#first-search').find('.answer').text('Rolstoel');
});
$('#submit-product').mouseover(function() {
  submit_product_hovered = true;
}
$('#submit-product').mouseleave(function() {
  submit_product_hovered = false;
}

【讨论】：

【解决方案2】：

// 尝试包含 css display none

.popup-search{
        position: absolute;
        width: 250px;
        bottom: -122px;
        right: 320px;
        z-index: 100;
        background-color: white;
        padding: 15px;
        border-radius: 4px;
        display:none;
        box-shadow: 0 7px 12px #879e30;
       display:none;

    }

【讨论】：

【解决方案3】：

感谢您的回复。最后我决定触发答案类而不是父div：

$('.answer').click(function(){
        $(this).next().removeClass('hide');
    });

    $('#submit-product,#submit-location,#submit-radius').click(function(){
        $(this).parent().parent().addClass('hide');
        var filledtext = $(this).parent().find('input').val();
        $(this).parent().parent().parent().find('.answer').text(filledtext);
    });

【讨论】：

【解决方案4】：

只需添加“隐藏”额外。

$('#submit-product').click(function(){

$('.popup-search').removeClass('show').hide();

$('#first-search').find('.answer').text('Rolstoel');

});

【讨论】：