したがって、私はこの問題をトグル（）を使用しています。問題は、クリックの代わりにトグルを使用すると、ブロックがリロード後にページから離れてスライドすることです。ブロックを切り替えることさえできません。 ここにコードがありますjQueryで.toggle（）メソッドを使用すると、コードがcorectlyで動作しない
代わりに.click（）を使用すると、 "トグル"と書いても、ページがリロードされたらすぐにブロックが移動し、自分自身を切り替えることはできません。
1）あなたは、私が<script>
に<script src="js/scripts.js">を削除<script></script> 同じタグの下のスクリプトのソースとスクリプトコードを持つことはできません。
<!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><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>ええ、おかげで削除されますが、それは私が望んでいたではない、まさにでした。私は実際に私の.jsファイルをhtmlから分離しているので、コードを1つに結合してここに貼り付けるのは間違いです。 – Slava
私が欲しかったのは、bgとフォントの色を何度か切り替えることでした。一度クリックするとブロックが黒く塗りつぶし、もう一度クリックするとブロックが緑色になります。クリック偶数 - 緑、クリック奇数 - 緑を使うことができましたが、そのためのトグル方法を使いたいと思っていました。それはいくつかのバーを隠すためにmentではなく、色を変えるだけでした。 – Slava
ここにもう1つの例がありますが、正しく動作しません – Slava
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: [email protected]" />
<p><strong>Your desires:</strong></p>
<textarea cols="45" rows="2" id="mytextarea"></textarea>
</div>
</fieldset>
</div>
</form>
</body>
</html>
'トグル（FN、FN）を' 1.8で非推奨とその後1.9 – Satpal