領域外のクリックでメニューを閉じたいのです！

Question

<script>
$(function(){
  $(".ddd").css("display","none");
  $(".button-toggle").on("click", function() {
    $(".ddd").slideToggle();
  });
});
</script>

<script>
$(function(){
  var flg = "off";
  $('.button-toggle').on('click', function(){
    if(flg == "off"){
      $(this).html("<div>close</div>");
      flg = "on";
    }else{
      $(this).html("");
      flg = "off";
    }
  });
});
</script>


<script>
  $(function() {
  var flg = "on";	  
    $(document).click(function() {
		 if(flg == "on"){			
      $(".button-toggle").click();}
	   flg = "off";
    });
  });
</script>

こんにちは！
上２つのスクリプトで、メニューの開閉と、開閉時のデザインをコントロールしています。

問題は３つ目のスクリプトで、メニューが開いているときに、領域外をクリックするとメニューが閉じるよう試行錯誤しているのですが、なかなかうまくいきません。どなたかご教示をいただければ幸いです。よろしくお願いいたします。

Comments

[yambejp]

HTMLもお願いします

[cwhiro]

お返事ありがとうございます。
htmlこちらになります。

<div class="wrap">

<div class="button-toggle">
<div>ボタン</div>
</div>

<div class="ddd">
<ul>
<li>
ボタンA
</li>
<li>
ボタンB
</li>
</ul>
</div>

</div>

Answer 1

  $(document).click(function(event) {
    if ($(event.target).closest('.button-toggle').length) {
      return false;
    }

    $(".button-toggle:has(div)").click();
  });

https://api.jquery.com/has-selector/

Comments

[cwhiro]

できました！ありがとうございます！

[cwhiro]

すいません、スタイルなど当てて当ててみましたら、いつでもどこでもクリックに反応するようになってしまいました。もしまだお付き合いいただけるなら、見ていただくことできますでしょうか。

スタイルなどあてたコードです

<!--１つめ-->
<script>
$(function(){
$(".teltel").css("display","none");
$(".button-toggle").on("click", function() {
$(".teltel").slideToggle();
$(this).toggleClass("telactive");
});
});
</script>

<script>
$(function(){
var flg = "off";
$('.button-toggle').on('click', function(){
if(flg == "off"){
$(this).html("<div class='stelclose'><span class='icon-cross1'></span></div>");
flg = "on";
}else{
$(this).html("<div class='stel'>でんわ</div><div class='stel2' ><span class='icon-phone'></span></div>");
flg = "off";
}
});
});
</script>

<div class="callwrap">

<div class="button-toggle">
<div class="stel">でんわ</div>
</div>

<div class="teltel">
<ul>
<li>
<a href="tel:000000" A</a>
</li>
<li>
<a href="tel:000000" B</a>
</li>

</ul>
</div>
＜/div>

[x_x]

リンク先にあるように、:has(div) は子孫の div の有無をチェックしているので両方とも div を入れると正しく動きません。
:has(.stelclose) に変更してみてください。

[cwhiro]

何度もありがとうございます。
ただいま全力で頭回転させてます。has(.stelclose)にしてみたところ、開いてすぐにまた閉じる動きになってしまいました。

[cwhiro]

関係ありそうな.stelや.teltelなど各クラスを色々と組み合わせてあてはめてみましたが、うまく機能いたしませんでした。あとちょっとのような感じもするのですが。

×_×様、大変お詳しそうなので、もし上手に機能するまでお付き合いいただければ、何かお礼をと思ったのですが、そういったやり取りはこの場ではふさわしくないような気もして、連絡先をと思ったのですが、見つけられませんでした。色々初心者ですいません。

[x_x]

あまり時間が取れなかったので追加のコードについてはほとんど見ていません。
わたしが時間が取れるようになるまで待つか、ほかの回答を待つか、あるいは自力で解決するかしてもらえたらと思います。

[cwhiro]

ありがとうございます。もう少しねばってみます！

[cwhiro]

×_×様　なんとか解決をいたしました！　最終的に下記のコードで意図した動きをするようになりました。共通のクラスをところどころ利用しているため、全てにクラスの追加を行えば個別に動きそうです。　おつきあいいただいて、ありがとうございました。

$(function () {
$(".button-toggle").click(function (e) {
if($(".teltel").length>0)
$(".teltel").show();
e.stopPropagation();
});
});

$(document).click(function() {
if($(".stelclose").length>0)
$(".button-toggle").click();
});