Question

我在悬停时附加一个div因此它会一直添加。当光标悬停在元素上时，如何阻止它添加并显示/隐藏？

$('#submit-question-dropdown').hover(function() {
  $('#submit-question-dropdown').append(`<div class="row" style='position:absolute;right:50px;background-color:red;z-index:5;padding:20px;top:70px;'><div id="addQuestion" style="float:left;" class="col-sm-6"><h3 style="margin-bottom:15px;">Submit question</h3><form onsubmit="createQuestion(quizType, $('#submitQ').val(), $('#submitA1').val(), $('#submitA2').val(), $('#submitA3').val(), $('#submitA4').val(), $('#submitCorrect').val(), $('#submitExpl').val(), $('#submitAuthor').val(), $('#submitDesc').val(), $('#submitDate').val());return false;"method="POST"><label style="margin-right:30px;" for="add-banking-question"><input class="form-control" id="add-banking-question" type="radio" name="add-q-quizType" value="BankingQuizQuestion" checked>Investment Banking</label><label for="add-trading-question"><input class="form-control" id="add-trading-question" type="radio" name="add-q-quizType" value="TradingQuizQuestion">Sales & Trading</label><input style="margin-top:10px;" class="form-control" type="text" id="submitQ" placeholder="Question" name="addq-q"><input class="form-control" type="text" id="submitA1" placeholder="Answer 1" name="addq-a1"><input class="form-control" type="text" id="submitA2" placeholder="Answer 2" name="addq-a2"><input class="form-control" type="text" id="submitA3" placeholder="Answer 3" name="addq-a3"><input class="form-control" type="text" id="submitA4" placeholder="Answer 4" name="addq-a4"><input class="form-control" type="text" id="submitCorrect" placeholder="Correct answer index" name="addq-correct"><input class="form-control" type="text" id="submitDesc" placeholder="Short description" name="addq-desc"><textarea class="form-control" type="text" id="submitExpl" placeholder="Explanation" name="addq-expl"></textarea><input class="form-control" type="text" id="submitAuthor" placeholder="Your name" name="addq-author"><input class="form-control" type="text" hidden id="submitDate" name="addq-date"><input class="btn btn-primary" type="submit" value="Send" style='width:100%;'><div hidden id="success-submit">Thanks! We will review your question in 48 hours.</div></form></div></div>`)
})

Answer 1

试试这个：

$('#submit-question-dropdown').hover(function() {

    if( $('#submit-question-dropdown').find('.row').length == 0 )
    {
        // No div is there, append it
    }
    else
    {
        // hide/show it
    }

});

Answer 2

这是如何做你想要的（你必须填写追加功能，我不得不削减太久了）：

    var done = false;
    $('#submit-question-dropdown').hover(function() {
        if (done == false)
        {
            $('#submit-question-dropdown').append();
            done = true;
        }
        $(this).hide();
    });
    $( "#submit-question-dropdown" ).mouseout(function() {
        $(this).show();
    });

Answer 3

您可以检查div是否已存在。基于此，您可以添加和删除div。像这样使用

$('#submit-question-dropdown').hover(function() {

    if( $('#submit-question-dropdown').find('.row').length == 0 )
    {
        $('#submit-question-dropdown').append('<div class="row" style='position:absolute;right:50px;background-color:red;z-index:5;padding:20px;top:70px;'><div id="addQuestion" style="float:left;" class="col-sm-6"><h3 style="margin-bottom:15px;">Submit question</h3><form onsubmit="createQuestion(quizType, $('#submitQ').val(), $('#submitA1').val(), $('#submitA2').val(), $('#submitA3').val(), $('#submitA4').val(), $('#submitCorrect').val(), $('#submitExpl').val(), $('#submitAuthor').val(), $('#submitDesc').val(), $('#submitDate').val());return false;"method="POST"><label style="margin-right:30px;" for="add-banking-question"><input class="form-control" id="add-banking-question" type="radio" name="add-q-quizType" value="BankingQuizQuestion" checked>Investment Banking</label><label for="add-trading-question"><input class="form-control" id="add-trading-question" type="radio" name="add-q-quizType" value="TradingQuizQuestion">Sales & Trading</label><input style="margin-top:10px;" class="form-control" type="text" id="submitQ" placeholder="Question" name="addq-q"><input class="form-control" type="text" id="submitA1" placeholder="Answer 1" name="addq-a1"><input class="form-control" type="text" id="submitA2" placeholder="Answer 2" name="addq-a2"><input class="form-control" type="text" id="submitA3" placeholder="Answer 3" name="addq-a3"><input class="form-control" type="text" id="submitA4" placeholder="Answer 4" name="addq-a4"><input class="form-control" type="text" id="submitCorrect" placeholder="Correct answer index" name="addq-correct"><input class="form-control" type="text" id="submitDesc" placeholder="Short description" name="addq-desc"><textarea class="form-control" type="text" id="submitExpl" placeholder="Explanation" name="addq-expl"></textarea><input class="form-control" type="text" id="submitAuthor" placeholder="Your name" name="addq-author"><input class="form-control" type="text" hidden id="submitDate" name="addq-date"><input class="btn btn-primary" type="submit" value="Send" style='width:100%;'><div hidden id="success-submit">Thanks! We will review your question in 48 hours.</div></form></div></div>');
    }
    else
    {
        $('#submit-question-dropdown').find('.row:first').remove();
    }

});

如何停止在悬停时添加div？

3 个答案: