所以我有这个问题，使用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>
答案 0 :(得分：1)
我在这里发现了两个问题：
1）您不能在同一标记<script></script>下拥有脚本源和脚本代码
我已将<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>
答案 1 :(得分：0)
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>