在jQuery中使用.toggle()方法时，代码不能正常工作
在jQuery中使用.toggle()方法时，代码不能正常工作
提问于 2016-10-25 18:25:48
所以我遇到了这个问题，使用toggle()。问题是，当我使用切换而不是单击，块在重新加载后滑出页面，我甚至不能，嗯，切换块。以下是代码
如果我使用.click( )代替-它可以工作，但是如果我写" toggle "，当我重新加载页面时，块就会滑动，而不是让我自己切换。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Email input page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js">
$(document).ready(function($) {
$('#newdiv').on('toggle', function() {
$(this).css({
'background': 'black',
'color': 'white'
});
}, function() {
$(this).css({
'background': 'green',
'color': 'red'
});
/!* Stuff to do every *even* time the element is clicked *!/
});
});
</script>
</head>
<body>
<input value="enter your email:" type="" name="" />
<div id="newdiv">
test div for test something
</div>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2016-10-25 18:57:56
我在这里发现了两个问题：
1)您不能将脚本源和脚本代码放在同一标记下，我将<script src="js/scripts.js">移至<script>
2)可以在<details>上监听切换事件，而不是在<div>上监听
我希望这能对你有所帮助。请看下面的代码片段：
<!DOCTYPE HTML>
<head>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="UTF-8"/>
<title>Email input page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" >
$(document).ready(function($) {
$('#newdiv').on('toggle', function() {
$(this).css({
'background': 'black',
'color': 'white'
});
}, function() {
$(this).css({
'background': 'green',
'color' : 'red'
});/!* Stuff to do every *even* time the element is clicked *!/
});
});
</script>
</head>
<body>
<input value="enter your email:" type="" name=""/>
<details id="newdiv">
test div for test something
</details>
</body>
</html>
Stack Overflow用户
发布于 2016-10-25 21:55:37
Here is another example of code with toggle, that does not work. the thing is that it has to hide/show the form below the block "formHide", changing the text in it the block, but insted with method .toggle() written to code the block just hides on the reload not giving to toggle itself.
<!DOCTYPE HTML>
<head>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="UTF-8"/>
<title>Email input page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" >
$('#formHide').toggle(function(){
$('#my_form').fadeOut(10000);
$(this).text('expand form');
}, function () {
$('#my_form').fadeIn(5000);
$(this).text('colapse form');
});
</script>
</head>
<body>
<div id="formHide">colapse form</div>
<form action="form.php" id="my_form">
<div id="bigform">
<fieldset>
<div id="div_form_ 1">
<fieldset id="innerfieldset">
<legend>addition options</legend>
<p><strong>You need?</strong></p>
<div id="format">
<input type="checkbox" value="sh" name="dop_oprions" id="shlem" />
<label for="shlem">Helm</label>
<input type="checkbox" value="bag" name="dop_oprions" id="bag" />
<label for="bag">Backpack</label>
<input type="checkbox" value="od" name="dop_oprions" id="od" />
<label for="od">Wear</label>
</div>
<p><strong>insurance</strong></p>
<div id="radio">
<input type="radio" id="inch_yes" value="yes" name="inch" />
<label for="inch">Yes</label>
<input type="radio" id="inch_no" value="no" name="inch" />
<label for="inch">No</label>
</div>
</fieldset>
<input type="submit" value="Send" id="my_button" />
</div>
<div id="div_form_2">
<span>Model:</span>
<select name="moto" size="1" id="motoSelect">
<option value="1">FIrst value(options)</option>
<option value="2">Second value(options)</option>
<option value="3">Third value(options)</option>
<option value="4">Fourth value(options)</option>
</select>
<span>Days:</span>
<select name="days" size="1" id="daysSelect">
<option value="1">1</option>
<option value="2">2</option>
</select>
<p><strong>Your email:</strong></p>
<input type="text" id="email" value="Example: you@site.ru" />
<p><strong>Your desires:</strong></p>
<textarea cols="45" rows="2" id="mytextarea"></textarea>
</div>
</fieldset>
</div>
</form>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40237478
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号