javascript - Jquery on(click) 问题并更改点击目标

Question

我有基本的 HTML 和基本的 JQuery 代码，如下所示:

HTML代码:

<section id="footer-extras">
  <div class="footer-extras point1">
    <div id="footer-float" class="point1">
      <span id="f-search" class="f-search">
        <span id="fsearchselector" class="circle">
          <span class="default">ONLY CLICK</span>
          <span id="fsearchcontent" class="content rmclass">
            CONTENT SHOW / HIDE
          </span>
        </span>
      </span>
      <span class="fextras-wrapper">
        <span id="fextraselector" class="circle">
          <span class="default">ONLY CLICK</span>
          <span id="fextrascontent" class="content rmclass">
            CONTENT SHOW / HIDE
          </span>
        </span>
      </span>
      <span class="f-menu-wrapper">
        <span id="fmenuselector" class="circle">
          <span class="default">ONLY CLICK</span>
          <span class="content rmclass">
            CONTENT SHOW / HIDE
          </span>
        </span>
      </span>
    </div>
  </div>
</section>

JQuery 代码:

 $(function(){ //F1
        $("#footer-float > span > span > .default").on("click",function(event){
                $(this).next().toggleClass('rmclass');
                $("#footer-float > span > span > .default").not(event.currentTarget).next().addClass('rmclass');
            });
            $(document).on("mouseup touchstart", function (event){
                var container = $("#footer-float > span > span > .default").next();
                if (!$(event.target).parent().hasClass("circle_opened circle")) {
                        $("span.circle_opened").removeClass("circle_opened");
                        $(container).addClass('rmclass');
                }
            });

}); //Parent function

当我点击如下目标时，我的问题开始了:

1. 第一次点击应该通过 toggleClass 打开隐藏菜单 ==> OK
2. 第二次点击相同的目标 ==> Not OK，因为点击转移到所示的新跨度。 (隐藏内容容器)
3. 单击容器关闭所有打开的面板 ==> OK 如果我愿意去掉代码的第二个Function //F2: 第一个函数会工作得很好。

$(document).ready(function(){
   var event = event;
	 $(function(){ //F1
			$("#footer-float > span > span > .default").on("click",function(event){
					$(this).next().toggleClass('rmclass');
					$("#footer-float > span > span > .default").not(event.currentTarget).next().addClass('rmclass');
				});
				$(document).on("mouseup touchstart", function (event){
					var container = $("#footer-float > span > span > .default").next();
					if (!$(event.target).parent().hasClass("circle_opened circle")) {
							$("span.circle_opened").removeClass("circle_opened");
							$(container).addClass('rmclass');
					}
				});

	}); //Parent function
}); //Document Ready function

section > div > div > * {
display:block;
width:auto;
margin: 20px 0;
padding:10px;
border:2px solid #333;
text-align:center
}
span {display: block;}

.rmclass {
  display:none;
  border:1px solid blue;
  width: auto;
  padding: 0 15px;
}

.default {
  font-weight:bolder;
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="footer-extras">
  <div class="footer-extras point1">
    <div id="footer-float" class="point1">
      <span id="f-search" class="f-search">
        <span id="fsearchselector" class="circle">
          <span class="default">ONLY CLICK</span>
          <span id="fsearchcontent" class="content rmclass">
            CONTENT SHOW / HIDE
          </span>
        </span>
      </span>
      <span class="fextras-wrapper">
        <span id="fextraselector" class="circle">
          <span class="default">ONLY CLICK</span>
          <span id="fextrascontent" class="content rmclass">
            CONTENT SHOW / HIDE
          </span>
        </span>
      </span>
      <span class="f-menu-wrapper">
        <span id="fmenuselector" class="circle">
          <span class="default">ONLY CLICK</span>
          <span class="content rmclass">
            CONTENT SHOW / HIDE
          </span>
        </span>
      </span>
    </div>
  </div>
</section>

请问我的函数哪里出了问题？

1. 如我所料，ONLY CLICK it will toggleClass
2. 当我点击正文中的任何地方时，它会添加/删除类

你能否查看下面的演示并给出如何纠正此问题的建议，因为我花了一些时间尝试寻找解决方案但没有成功。

谢谢，塔里克

Answer 1

不知道下面是不是你要找的，但如果目标是 ONLY CLICK span ，我刚刚检查了触摸事件，否则触发事件。

if(!$(event.target).hasClass("default")) {
   // touch event code 
} 

$(function() { //F1

  $("#footer-float > span > span > .default").on("click", function(event) {
  console.log("e");
    $(this).next().toggleClass('rmclass');
    $("#footer-float > span > span > .default").not(event.currentTarget).next().addClass('rmclass');
  });

  $(document).on("mouseup touchstart", function(event) {  
    console.log(event.target);
    if(!$(event.target).hasClass("default")) {
      var container = $("#footer-float > span > span > .default").next();
      if (!$(event.target).parent().hasClass("circle_opened circle")) {
         $("span.circle_opened").removeClass("circle_opened");
         $(container).addClass('rmclass');
      }
    }
  });

}); //Parent function

section>div>div>* {
  display: block;
  width: auto;
  margin: 20px 0;
  padding: 10px;
  border: 2px solid #333;
  text-align: center
}

span {
  display: block;
}

.rmclass {
  display: none;
  border: 1px solid blue;
  width: auto;
  padding: 0 15px;
}

.default {
  font-weight: bolder;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="footer-extras">
  <div class="footer-extras point1">
    <div id="footer-float" class="point1">
      <span id="f-search" class="f-search">
        <span id="fsearchselector" class="circle">
          <span class="default">ONLY CLICK</span>
      <span id="fsearchcontent" class="content rmclass">
            CONTENT SHOW / HIDE
          </span>
      </span>
      </span>
      <span class="fextras-wrapper">
        <span id="fextraselector" class="circle">
          <span class="default">ONLY CLICK</span>
      <span id="fextrascontent" class="content rmclass">
            CONTENT SHOW / HIDE
          </span>
      </span>
      </span>
      <span class="f-menu-wrapper">
        <span id="fmenuselector" class="circle">
          <span class="default">ONLY CLICK</span>
      <span class="content rmclass">
            CONTENT SHOW / HIDE
          </span>
      </span>
      </span>
    </div>
  </div>
</section>