クラスでアクセスされるdivタグの可視性を変更するにはどうすればよいですか？

Question

おはよう、

私は使い慣れていることを改善したいと思います。だから、ユーザーが矢印とその周囲のボックスをクリックすると、コンテンツをスライドさせたい。しかし、現時点では、ユーザーは矢印だけをクリックすることができますが、ボックスはクリックできません。

Htmlのは次のようになります。

<div class="ALL"> 
     <img src="~/Images/ic_keyboard_arrow_up_black_24dp.png" alt="Arrow" id="Arrow_up" style= "display: block; margin-left: auto; margin-right: auto" /> 
     <img src="~/Images/ic_keyboard_arrow_down_black_24dp.png" alt="Arrow" id="Arrow_down" style= "display: block; margin-left: auto; margin-right: auto" /> 

     <div id="Part_of_ALL"> 
     @Html.Partial("_PartialView", Model) 
     </div> 

    </div> 

ユーザーがちょうど箱をプルアップまたはダウンするには、矢印をクリックすることができます古いジャバスクリプト：

$(document).ready(function() { 
    $('#Arrow_down').hide(); 
    $('#Arrow_up').show(); 
    $('#escalation_model').hide(); 

    $('#Arrow_up').click(function() { //change here to .ALL 
     $(".ALL").switchClass("ALL", "ALL_open",0); 
     $('#Arrow_up').hide(); 
     $('#Arrow_down').show(); 
     $('#Part_of_ALL').show();    
    }); 

    $('#Arrow_down').click(function() { //change here to .ALL_open 
     $(".ALL_open").switchClass("ALL_open", "ALL", 0); 
     $('#Arrow_up').show(); 
     $('#Arrow_down').hide(); 
     $('#Part_of_ALL').hide(); 

    }); 
}); 

だから、今私は私の目標を達成するために思った私はid = "Arrow_down/up"のクリック機能のアクティブ化をクラスALLとALL_openに変更しなければならず、しかし、それは動作しません。それはボックスを開くことができますが、私の閉鎖行動には反応しません。私はまた、すべてのものをトグルすることでそれを試しました。なぜなら、その短いjavascriptだからです。 何が間違っていますか？ ありがとうございます。

Answer 1

あなたが話しているボックス

$(document).ready(function() { 
 
    $('#Arrow_down, #Part_of_ALL').hide(); 
 
    $('#Arrow_up').show(); 
 
    $('#escalation_model').hide(); 
 

 
    $('.ALL').click(function() { //change here to .ALL 
 
    $(this).switchClass("ALL", "ALL_open", 0); 
 
    $('#Arrow_up, #Arrow_down, #Part_of_ALL').toggle(); 
 
    }); 
 
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" /> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<div class="ALL"> 
 
    <img src="//placehold.it/64?text=UP" alt="Arrow" id="Arrow_up" style="display: block; margin-left: auto; margin-right: auto" /> 
 
    <img src="//placehold.it/64?text=DOWN" alt="Arrow" id="Arrow_down" style="display: block; margin-left: auto; margin-right: auto" /> 
 

 
    <div id="Part_of_ALL"> 
 
    @Html.Partial("_PartialView", Model) 
 
    </div> 
 

 
</div>