「打開」切換按鈕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'; 
}); 

這用來檢查容器可見已經，如果是則持續停止的事件處理程序。

您可能需要將容器設置爲顯示：無;在你的CSS默認取決於容器是否技術上是可見的，當按鈕被點擊，但從視圖被遮住作爲jquery .is（「：可見」）不是世界上最直觀的方法。

Answer 2

你可以只隱藏初始按鈕，然後再次顯示它當用戶點擊發送：

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