2015-04-01 46 views
0

我有一個設置爲顯示的div:無。獲取顯示:當按下按鈕時,沒有div切換(使其顯示),然後*保持*顯示?

我有一個按鈕,使用jQuery代碼,顯示div。

我喜歡它,所以當用戶再次點擊按鈕時,什麼也沒有發生 - div無論如何都保持顯示。

這是如何實現的?

我正在使用的代碼:http://jsfiddle.net/eL2AU/

JS:

$('#myBtn').click(function() { 
    $('#myDiv').toggle(); 
}); 

HTML:

<div id="myDiv" style="display: none"> 
    Hello this is my div 
</div> 
<button id="myBtn">Toggle Div</button> 

CSS:

#myDiv { 
    background-color: red; 
    color: blue; 
    height: 50px 
} 

謝謝。

+1

你可以用$( '#myDiv')顯示()。而不是切換 – 2015-04-01 10:33:58

回答

2

如果你想只顯示#myDiv,然後請用.show()替換.toggle() 但是如果您想顯示/隱藏,請使用以下代碼。

$('#myBtn').click(function() { 
 
    if ($('#myDiv').is(":visible")) { 
 
    $('#myDiv').hide(); 
 
    } else { 
 
    $('#myDiv').show(); 
 
    } 
 
});
#myDiv { 
 
    background-color: red; 
 
    color: blue; 
 
    height: 50px 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="myDiv" style="display: none"> 
 
    Hello this is my div 
 
</div> 
 
<button id="myBtn">Toggle Div</button>

2

使用.show()

$('#myBtn').click(function() { 
 
    $('#myDiv').show(); 
 
});
#myDiv { 
 
    background-color: red; 
 
    color: blue; 
 
    height: 50px 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="myDiv" style="display: none"> 
 
    Hello this is my div 
 
</div> 
 
<button id="myBtn">Toggle Div</button>

2

修改代碼,這

$('#myBtn').click(function() { 
    $('#myDiv').show(); 
}); 

Demo Here