[JQ] クリックによる表示非表示をしたい

Question

お世話になります。

[.telmail .tel] 要素をクリックすると [.box]要素を表示非表示されるようなボタンを作りたいと思っております。

下記のように書くと、[.telmail .tel] 要素で表示非表示はできるのですが、 表示された[.box]要素をクリックしても非表示されてしまい困っております。

[.telmail .tel]のみクリック可能にすることはできますでしょうか。
アドバイスいただければ幸いです。
宜しくお願いいたします。

		 $(function(){
		 $(".box").css("display", "none");
		$(".telmail .tel").click(function(){
    $(".box").toggle();
});
	});	

<ul class="telmail">
    		<li class="tel">
    			<a class="fa fa-phone"></a>
    			<span class="box">
					<span class="tel_left">
							
						<span class="title" style="color: #128c3e;">/span>
						<span class="free"></span>
						<span class="title"><span></span></span>
						
					</span>
				
				</span>
    		</li>
    		<li class="mail"><a href="<?php bloginfo('url'); ?>/contact/"></a></li>
    	</ul>

Comments

[m.ts10806]

HTMLもあわせてご提示ください。

[cues]

申し訳ございませんでした、追加いたしました。

Answer 1

申し訳ございません。
".telmail .tel" の箇所を ".telmail .tel a"にすることで
なおりました。

お騒がせいたしました。