clickで開閉するtoggleClass内のaタグリンクをクリックしたとき開閉しないようにしたい

toggleClassを指定して、要素をclickするとぴょこんと出るバナーエリアを作りました。
その上で、バナーエリア内にaタグリンクを置きました。

aタグエリアをクリックするとリンクは遷移するのですが、バナーエリアも反応してしまい、同時に引っ込んでしまいます。

一瞬の動きですが気になるので、引っ込む動作はしないようにしたいです。
開閉の動きは疑似要素で作った「open」「close」のみで制御したいです。

お教えいただきたく、どうぞよろしくお願いいたします。

html
1<html>
2<head>
3<style>
4#toggle{
5	position: fixed;
6	top: 0;
7	right: -180px;
8	background: black;
9	color: #fff;
10}
11#toggle.ac{
12	right:0px;
13}
14#toggle ul li{
15	list-style: none;
16}
17#toggle ul li.bnr a{
18	display: block;
19	background: red;
20	width: 140px;
21}
22#toggle:before {
23	position: absolute;
24	content: "open";
25	background: green;
26	height: 30px;
27	width: 50px;
28	left: -50px;
29}
30#toggle.ac:before {
31	position: absolute;
32	content: "close";
33	background: blue;
34	height: 30px;
35	width: 50px;
36	left: -50px;
37}
38</style>
39</head>
40<body>
41<div id="toggle" class='ac'>
42	<ul>
43		<li class="bnr"><a href="http://www.yahoo.co.jp/">yahooリンク</a></li>
44	</ul>
45</div>
46<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=4.2.2'></script>
47<script>
48	$("#toggle").click(function(){
49		$(this).toggleClass("ac");
50});
51</script>
52</body>
53</html>

行動規範の内容に同意します

回答1件

ベストアンサー

クリックされた箇所がaタグだったら、toggleClassは反応せず通常リンクになるように、e.targetで判定ですかね。

javascript
1	$("#toggle").click(function(e){
2		if(e.target.tagName.toLowerCase() != 'a'){
3			e.preventDefault();
4			$(this).toggleClass("ac");
5			return false;
6		}
7	});