I have the following script in my homepage
$(function () { // same as $(document).ready(function () { })
// assuming we have the open class set on the H2 when the HTML is delivered
$('li.drawer h2:not(.open)').next().hide();
$('h2.drawer-handle').click(function () {
// find the open drawer, remove the class, move to the UL following it and hide it
$('h2.open').removeClass('open').next().hide();
// add the open class to this H2, move to the next element (the UL) and show it
$(this).addClass('open').next().show();
});
});
It works in Safari, but not in Firefox 3.08/3.1 beta3.
How can you get the above jQuery script work in Firefox?
[edit]
First lines of my index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
".dtd">
<html xmlns="" lang="en" xml:lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"/>
<link href="template.css" type="text/css" rel="stylesheet"/>
<title>Abc</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
! - - - - Above Code is at Here - - - - -
</script>
</head>
The body of index.html
<body>
<div class="mainbody">
<h1 class="myheader">Test</h1>
<p>Test</p>
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Contact info</h2>
<ul>
<li>name
</li>
<li>
<div class="">aaa
</div>
</li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Unpublished</h2>
<ul>
<li class="italic">
<i>A</i> (2009).
</li>
<li class="italic">
<i>aaa</i> (2008).
</li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Recent projects</h2>
<ul>
<li class="italic">
Websites
</li>
<li class="italic">
Search
<form action="" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="8834479:1qd7hky6khe" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src=";lang=en"></script>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I have the following script in my homepage
$(function () { // same as $(document).ready(function () { })
// assuming we have the open class set on the H2 when the HTML is delivered
$('li.drawer h2:not(.open)').next().hide();
$('h2.drawer-handle').click(function () {
// find the open drawer, remove the class, move to the UL following it and hide it
$('h2.open').removeClass('open').next().hide();
// add the open class to this H2, move to the next element (the UL) and show it
$(this).addClass('open').next().show();
});
});
It works in Safari, but not in Firefox 3.08/3.1 beta3.
How can you get the above jQuery script work in Firefox?
[edit]
First lines of my index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"/>
<link href="template.css" type="text/css" rel="stylesheet"/>
<title>Abc</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
! - - - - Above Code is at Here - - - - -
</script>
</head>
The body of index.html
<body>
<div class="mainbody">
<h1 class="myheader">Test</h1>
<p>Test</p>
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Contact info</h2>
<ul>
<li>name
</li>
<li>
<div class="">aaa
</div>
</li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Unpublished</h2>
<ul>
<li class="italic">
<i>A</i> (2009).
</li>
<li class="italic">
<i>aaa</i> (2008).
</li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Recent projects</h2>
<ul>
<li class="italic">
Websites
</li>
<li class="italic">
Search
<form action="http://www.google./cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="8834479:1qd7hky6khe" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google./coop/cse/brand?form=cse-search-box&lang=en"></script>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
- Masi: post the HTML this script is actually manipulating! – Shog9 Commented Apr 27, 2009 at 18:45
- I posted my entire HTML file. – Léo Léopold Hertz 준영 Commented Apr 27, 2009 at 18:49
4 Answers
Reset to default 2It works for me in Firefox 3.0.9
What exactly is not working?
My guess is that you have invalid HTML which causes some wrong DOM structure in Firefox. But it is hard to tell without looking at your code.
Why are your tags in your jquery selectors in uppercase? By your doctype, you're using XHTML, and all tags must be lowercase. Not sure if that'll make a difference, but you should change H2 => h2, etc.
I got the code to work in Firefox by replacing the following
<script type="text/javascript" src="jquery.js" />
to
<script type="text/javascript" src="jquery.js"></script>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745366626a4624609.html
评论列表（0条）