How can I make this not move and only load beneath it?
Currently, if you click item 2, it will reveal a input box and also widen the <li>. I don't want it to alter the size of the <li> and I want it to open right beneath item 2. How can i achieve this? Also, I want to make it close on click after it's been opened, but my jQuery doesn't seem to work.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#menu').click(
function() { $('fieldset', this).slideDown(); },
function() { $('fieldset', this).slideUp(); });
});
</script>
<style>
ul, li {
float: right;
di开发者_运维百科splay: inline;
margin: 0px
padding: 0px
}
</style>
</head>
<body>
<ul>
<li>item 1 </li>
<li id="menu">Item 2
<fieldset style="display: none;">
<form>
<input type="text">
</form>
</fieldset>
</li>
<li>Item 3</li>
</ul>
</body>
</html>
To hide the field, replace click in your code with toggle.
This alteration should do the trick.
<li id="menu"> <div style="display:block">Item 2 </div>
<fieldset id="field1" style="display: none;">
<form>
<input type="text">
</form>
</fieldset>
</li>
To close it the jquery command would be
$('#menu').click(function(){
$('#field1').hide();
});
加载中,请稍侯......
精彩评论