jqueryの - 親をクリックして、アクションを行いますが、子どもたちに

Question

私はクラスで

<div class="item"> 
    <div class="showed"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe magnam, ea est quo voluptate a necessitatibus facere explicabo. Doloribus odio, atque voluptatibus. Libero est, eius totam incidunt eaque debitis reprehenderit.</p> 
    <a href="#" class="nope">AA</a> 
    </div> 
    <div class="hided">Im hided</div> 
</div> 

イム隠しdiv要素はCSSで隠して、HTMLでこの要素を持っていない

.item { 
    border: 2px solid black; 
    margin: 20px; 
    cursor: pointer; 
} 

.hided { 
    display: none; 
} 

とjQueryで、私は可能だ

.hidded divを表示するswtiching。

$(".item").on("click", function(){ 
    $(this).find(".hided").toggle(); 
}); 

私が知らないのは、ユーザーがリンク要素（.nopeクラスを使用）をクリックした場合にトグルを回避する方法です。

Answer 1

event.targetが.nope要素でないことを確認してください。

$(".item").on("click", function(e) { 
 
    if ($(e.target).is(':not(.nope)')) 
 
    // or if (!$(e.target).hasClass('nope')) 
 
    $(this).find(".hided").toggle(); 
 
});

.item { 
 
    border: 2px solid black; 
 
    margin: 20px; 
 
    cursor: pointer; 
 
} 
 
.hided { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item"> 
 
    <div class="showed"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe magnam, ea est quo voluptate a necessitatibus facere explicabo. Doloribus odio, atque voluptatibus. Libero est, eius totam incidunt eaque debitis reprehenderit.</p> 
 
    <a href="#" class="nope">AA</a> 
 
    </div> 
 
    <div class="hided">Im hided</div> 
 
</div>

Answer 2

あなたはe.targetは、現在のクリックされた要素hasClassがnopeクラスはその要素の上に存在していることを変更しますあなたです、このようにしてみてください。

$(".item").on("click", function(e){ 
 
    if(!$(e.target).hasClass('nope')) 
 
    { 
 
    $(this).find(".hided").toggle(); 
 
    } 
 
});

.item { 
 
    border: 2px solid black; 
 
    margin: 20px; 
 
    cursor: pointer; 
 
} 
 

 
.hided { 
 
    display: none; 
 
}

<div class="item"> 
 
    <div class="showed"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe magnam, ea est quo voluptate a necessitatibus facere explicabo. Doloribus odio, atque voluptatibus. Libero est, eius totam incidunt eaque debitis reprehenderit.</p> 
 
    <a href="#" class="nope">AA</a> 
 
    </div> 
 
    <div class="hided">Im hided</div> 
 
</div> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>