Jquery on（点击）发出并更改点击目标

Question

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

HTML code：

<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 ==＆gt;打开隐藏的菜单的确定
2. 第二次点击同一目标==＆gt;单击不正常 转移到显示的新跨度。 （隐藏内容容器）
3. 点击容器关闭所有打开的面板==＆gt; 好的如果我愿意的话 删除代码//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. 我的期望，仅点击它将是toggleClass
2. 当我点击正文中的任何地方时，它会添加/删除类

您是否可以查看下面的演示并提供建议如何纠正这个问题，因为我花时间尝试搜索没有运气的解决方案。

谢谢你， 塔里克

Answer 1

我不知道下面是否是您要搜索的内容， 但我刚刚检查了触摸事件，如果目标是唯一的点击范围，否则触发事件。

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>