Question

我想展示并隐藏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;
}

Answer 1

//尝试包含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;

    }

Answer 2

它失败是因为#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;
}

Answer 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);
    });

Answer 4

只需添加＆＃34;隐藏＆＃34;额外的费用。

$（＆＃39;＃提交产物＆＃39）。单击（函数（）{

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

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

}）;

用jquery显示它后，Div不会隐藏

4 个答案: