クラスを表示するJqueryを使用してオーバーボタンをクリック

Question

ボタンクリックでdivを表示した後、別のボタンクリックで閉じられるはずです。 今、私はdivを表示して表示するかどうかを切り替えることができます。しかし、代わりに、私はそれをトグルしないようにしたいが、閉じるボタンをクリックするまではそこにとどまる。私はJ Queryを初めて使う。誰かが私はスライダーのdivの任意の部分をクリックするたびにhidden.Butからのdivアップをもたらすことができる。このIAMので

$('.trigger, .slider').click(function() { 
 
    $('.slider').toggleClass('close'); 
 
});

.slider { 
 
    position: absolute; 
 
    width: 1000px; 
 
    height: 100vh; 
 
    margin-top: -304px; 
 
    overflow: hidden; 
 
    background-color: aliceblue; 
 
    transition: all 1s; 
 
} 
 

 
.slider.close { 
 
    top: 100vh; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav-for-table slider close"> 
 
    <div id="home"> 
 
    <div class="container-fluid"> 
 
     <table class="table table-striped table-hover"> 
 
     <tr> 
 
      <td class="field-label col-xs-3 active" style="width: 20%;"> 
 
      <label>College</label> 
 
      </td> 
 
      <td class="col-md-3 oc pic"> 
 
      Value 1 
 
      </td> 
 
      <td class="col-md-3 oc pic"> 
 
      Value 2 
 
      </td> 
 
      <td class="col-md-3 oc pic"> 
 
      Value 3 
 
      </td> 
 
      <td class="col-md-3 oc pic"> 
 
      Value 4 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="field-label col-xs-3 active"> 
 
      <label>Location</label> 
 
      </td> 
 
      <td class="col-md-3 oc"> 
 
      Value 1 
 
      </td> 
 
      <td class="col-md-3 oc"> 
 
      Value 2 
 
      </td> 
 
      <td class="col-md-3 oc"> 
 
      Value 3 
 
      </td> 
 
      <td class="col-md-3 oc"> 
 
      Value 4 
 
      </td> 
 
     </tr> 
 
     </table> 
 

 
    </div> 
 
    </div> 
 

 
</div>

を助けてくださいすることができ、それが原因toggleClass に閉じます私はちょうど欲しいですdivを表示し、閉じるボタンをクリックするまで残しておきます。 アドバビンスありがとう。

Answer 1

toggleの代わりに、異なるボタンのそれぞれに異なるイベントハンドラを設定するだけです。

各ボタンには異なるアクションがありますので、クラスを追加するかクラスを削除するだけです。

$('.trigger.open').on('click', function() { 
    $('.slider').removeClass('close'); 
}); 
$('.trigger.close').on('click', function() { 
    $('.slider').addClass('close'); 
}); 

また、適切なクラスを異なるボタンに設定して、JSコードで適切なクラスを選択できるようにする必要があります。

<button type="button" class="trigger open">Click to open</button> 
<button type="button" class="trigger close">Click to close</button>