要素onclickを非表示および表示

Question

jqueryを初めて使用しました。 私は.angle_upと.angle_downのクラスの2つのpタグを持っています。

angle_upクラスはactiveクラスです。 .angle_downをクリックしている間にangle_upから.activeクラスを削除し、.angle_downに設定します。

クラスがactiveの間にアニメーションエフェクトを使用してeleを表示する必要があります。トグルのように。 これを達成する方法。前もって感謝します。

$(document).on("click", ".angle_up", function() { 
 
     $(this).removeClass("active"); 
 
     var angledwn = $('.angle_down'); 
 
     angledwn.addClass("active"); 
 
     var ele = $('.ele'); 
 
     ele.toggle('5000'); 
 
    });

.angle_up, .angle_down{ 
 
    color: #0096C9; 
 
    display: none; 
 
} 
 
.angle_up.active, .angle_down.active{ 
 
    color: #0096C9; 
 
    cursor: pointer; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="angle up active">First</p> 
 

 
<p class="angle_down"> Second</p> 
 

 

 

 
<p class="ele">To hide to display</p>

Answer 1

あなたのhtmlでのタイプミスを持っています。クラスはangle.upの代わりにangle_upです。

余分な共通クラス.angleを.angle_upと.angle_downに追加し、そのクラスをクリックイベントのセレクタとして使用します。

$(document).on("click", ".angle", function() { 
 
     var angledwn = $('.angle').not('.active'); 
 
     $(this).removeClass("active"); 
 
     angledwn.addClass("active"); 
 
     var ele = $('.ele'); 
 
     ele.toggle('5000'); 
 
    });

.angle_up, .angle_down{ 
 
    color: #0096C9; 
 
    display: none; 
 
} 
 
.angle_up.active, .angle_down.active{ 
 
    color: #0096C9; 
 
    cursor: pointer; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="angle angle_up active">First</p> 
 
<p class="angle angle_down"> Second</p> 
 
<p class="ele">To hide to display</p>

Answer 2

は、あなただけのタグpで選択し、クリックされていなかったP要素にクラスを追加する）（.NOT使用し、これを達成するためのクラスで要素を選択する必要はありません。

$(document).on("click", "p", function() { 
 
     $(this).removeClass("active"); 
 
     $("p").not(this).addClass("active"); 
 
     var ele = $('.ele'); 
 
     ele.toggle('5000'); 
 
    });

.angle_up, .angle_down{ 
 
    color: #0096C9; 
 
    display: none; 
 
} 
 
.angle_up.active, .angle_down.active{ 
 
    color: #0096C9; 
 
    cursor: pointer; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="angle_up active">First</p> 
 

 
<p class="angle_down"> Second</p> 
 

 

 

 
<p class="ele">To hide to display</p>

PS：あなたはそれを修正する必要が<p class="angle up active">First</p>

、それは

<p class="angle_up active">First</p> 

する必要がありますが、クラス名