Question : Jquery Prevent Focus when Clicked

Hello I'm trying to write an accessible drop down menu and I'm failing at the first hurdle.

I'm struggling with a focus and click event; when trying to get them to work in concert they just won't play nice. The idea is that if a user clicks or tabs onto this menu it expands. The problem is that the focus causes issues with the click event and it ends up bouncing up and down.

Could someone please look at the attached code and either tell me what I am doing wrong or suggest a different way that the menu can be made keyboard accessible?

Many thanks

Chris

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
	margin: 0;
	padding: 0;
}
</style>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function() {


		var toolbox = $("#toolBox");
		var toolBoxTrigger = $("#toolBox .toolBoxTrigger");
		var toolBoxAccordion = $("#toolBoxAccordion");

		toolBoxAccordion.hide();

		setToolBoxEvents(toolbox,toolBoxTrigger,toolBoxAccordion);

	});
	
		function setToolBoxEvents(toolbox,toolBoxTrigger,toolBoxAccordion) {
			toolBoxTrigger.click(function() {
			
				$(this).unbind("click").unbind("focus");

				if (toolBoxAccordion.not(":visible")) {
					openToolBox(toolbox,toolBoxTrigger,toolBoxAccordion);
				}
				return false;
			});
			toolBoxTrigger.focus(function() {
			
				$(this).unbind("click").unbind("focus");
				
				if (toolBoxAccordion.not(":visible")) {
					openToolBox(toolbox,toolBoxTrigger,toolBoxAccordion);
				}
				return false;
			});
		}
			
		function openToolBox(toolbox,toolBoxTrigger,toolBoxAccordion) {
			toolBoxAccordion.slideDown("fast");
			jQuery(document).click(function(e) {
				closeToolBox(toolbox,toolBoxTrigger,toolBoxAccordion);
				e.stopPropagation();
			});
		}
		function closeToolBox(toolbox,toolBoxTrigger,toolBoxAccordion) {
			toolBoxAccordion.slideUp("fast");
			
			setToolBoxEvents(toolbox,toolBoxTrigger,toolBoxAccordion);

			jQuery(document).unbind("click");
			return false;
		}
</script>

</head>
<body>

<div id="toolBox" class="toolBox">
	<a href="#" class="toolBoxTrigger"><span>Tools</span></a>
	<ul id="toolBoxAccordion" class="toolBoxAccordion">
		<li>
			<a href="">Test</a>
			<a href="">Test</a>
			<a href="">Test</a>
			<a href="">Test</a>
			<a href="">Test</a>	
		</li>
	</ul>
</div>
</body>
</html>

Answer : Jquery Prevent Focus when Clicked

I think this has it - I've implemented date recording, where on the click event I check how long ago the last focus event was. If it was longer then .5 seconds, then I execute the click, otherwise I ignore it.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
	margin: 0;
	padding: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	var focus_date;
	jQuery(document).ready(function() {

		var toolbox = $("#toolBox");
		var toolBoxTrigger = $("#toolBox .toolBoxTrigger");
		var toolBoxAccordion = $("#toolBoxAccordion");

		toolBoxAccordion.hide();
		
		/*$("*").not("#toolBox .toolBoxTrigger").click(function(e) {
			toolBoxAccordion.slideUp("fast");
			e.stopPropagation();
		});*/
		setToolBoxEvents(toolbox,toolBoxTrigger,toolBoxAccordion);

	});
	
	function setToolBoxEvents(toolbox,toolBoxTrigger,toolBoxAccordion) {
		toolBoxTrigger.click(function(event) {
			var click_date = new Date();
			if(click_date - focus_date > 500){
				toolBoxAccordion.slideToggle("fast");
			}
			//return false;
		});
		toolBoxTrigger.focus(function(event/*note this -it's important*/) {
			focus_date = new Date();
			toolBoxAccordion.slideToggle("fast");
			//return false;
		});
	}

</script>

</head>
<body>

<div id="toolBox" class="toolBox">
	<a href="#" class="toolBoxTrigger"><span>Tools</span></a>
	<ul id="toolBoxAccordion" class="toolBoxAccordion">
		<li>
			<a href="">Test</a>
			<a href="">Test</a>
			<a href="">Test</a>
			<a href="">Test</a>
			<a href="">Test</a>	
		</li>
	</ul>
</div>
</body>
</html>