“打開”切換按鈕jQuery

Question

打開切換菜單時，如何停止“按鈕”（“發送消息”）關閉切換功能，以便關閉切換菜單的唯一方法是單擊“發送”？

 jQuery(document).ready(function() { $("#container").hide(); $("#button").on('click', function() { $("#container").toggle(); this.value = this.value == 'send message' ? 'contact' : 'send message'; }); $("#button2").on('click', function() { $("#container").toggle(); $("#button").val('thank you'); }); }); 

 #container { height: 200px; width: 200px; position: relative; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" id="button" value="contact" /> <br /> <div id="container"> <input type="button" id="button2" value="send" /> </div> 

Answer 1

更改

$("#button").on('click', function() {
$("#container").toggle();
this.value = this.value == 'send message' ? 'contact' : 'send message';
});

至

$("#button").on('click', function() {
if($("#container").is(":visible"))
    return false;

$("#container").toggle();
this.value = this.value == 'send message' ? 'contact' : 'send message';
});

這將檢查容器是否已經可見，如果已經可見，則它將阻止事件處理程序繼續運行。

您可能需要將容器設置為顯示：none; 默認情況下，您的css中的值是多少，具體取決於單擊按鈕時該容器在技術上是否可見，但是由於jquery而被視圖遮擋。is（“：visible”）不是世界上最直觀的方法。

Answer 2

您可以只隱藏初始按鈕，然后在用戶單擊send時再次顯示它：

jQuery(document).ready(function () {  
    $("#container").hide();

    $("#button").on('click', function() {
        $("#container").toggle();
        $(this).hide();
    });

     $("#button2").on('click', function() {
        $("#container").toggle();
        $("#button").val('thank you');
        $("#button").show();
    });
});

的jsfiddle