jQueryの問題（クリック）をして

Question

は、私は基本的なjQueryのコードを使用して基本的なHTMLを持っているクリック対象を変更するには、次のように両方：

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. もう一度クリック==>OKではありません、。私は コード//F2の第2の機能を削除する場合は（隠されたコンテンツコンテナ）
3. は近く開いているすべてのパネル==>OKをされたコンテナをクリックしてください：最初の関数 がうまく動作します。

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

 
\t }); //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. 、は、それが
2. 私は身体の任意の場所をクリックすると、それはあなたが以下のデモをチェックして、どのようにアドバイスを与えることができ、クラス

を追加/削除しますがtoggleClassますをONLYをクリックしますこれを修正するには、私は運がない解決策を探す時間を費やしました。

は、私は、以下の場合は知らない、 タリク

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>