リンクをクリックするとdivを変更/非表示にする

Question

JQueryを開始したばかりで問題があります。ここでは、コードであり、私は、問題を説明します：私は、プログラミング言語をクリックすると、私はそれについていくつかの情報を表示したい

var main=function(){ 
 
    $('.disp').hide(); // hide information div 
 
    $('h4').on('click',function(){ 
 
     var textHTML=$(this).attr('data-info'); 
 
     $('.disp').hide("200"); 
 
     $('#' + textHTML).slideToggle("300"); 
 
    }); 
 
}; 
 

 

 
$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t <div id="displayInfo" class="row"> 
 
\t \t <h4 data-info="WEB" class="col-sm-2">WEB</h4> 
 
\t \t <h4 data-info="VBA" class="col-sm-2">VBA</h4> 
 
\t \t <h4 data-info="C" class="col-sm-2">C</h4> 
 
\t \t <h4 data-info="CPP" class="col-sm-2">C++</h4> 
 
\t \t <h4 data-info="Java" class="col-sm-2">Java</h4> 
 
\t </div> 
 

 
\t <div id="WEB" class="disp"> 
 
\t \t <p><u><strong>WEB</strong></u></p> 
 
\t \t <p><strong>test</strong>, test, <strong>test</strong></p> 
 
\t \t <p><strong>test test test</strong><br/> 
 
\t \t \t test 
 
\t \t </p> 
 
\t </div> 
 
\t <div id="VBA" class="disp"> 
 
\t \t <p><u><strong>VBA</strong></u></p> 
 
\t \t <p><strong>test</strong>, test, <strong>test</strong></p> 
 
\t \t <p><strong>test test test</strong><br/> 
 
\t \t \t test 
 
\t \t </p> 
 
\t </div> 
 
\t <div id="C" class="disp"> 
 
\t \t <p><u><strong>C</strong></u></p> 
 
\t \t <p><strong>test</strong>, test, <strong>test</strong></p> 
 
\t \t <p><strong>test test test</strong><br/> 
 
\t \t \t test 
 
\t \t </p> 
 
\t </div> 
 
\t <div id="CPP" class="disp"> 
 
\t \t <p><u><strong>C++</strong></u></p> 
 
\t \t <p><strong>test</strong>, test, <strong>test</strong></p> 
 
\t \t <p><strong>test test test</strong><br/> 
 
\t \t \t test 
 
\t \t </p> 
 
\t </div> 
 
\t <div id="Java" class="disp"> 
 
\t \t <p><u><strong>Java</strong></u></p> 
 
\t \t <p><strong>test</strong>, test, <strong>test</strong></p> 
 
\t \t <p><strong>test test test</strong><br/> 
 
\t \t \t test 
 
\t \t </p> 
 
\t </div> 
 

 
</div>

。どちらがうまくいくの？問題は、同じプログラミング言語をクリックしたときに情報を隠す方法がわからないことです。つまり、VBA情報が表示されている場合は、VBA名を再度クリックするとその情報が非表示になります。 toggle関数は正常に機能しますが、私が前の情報divを隠さなければ、プログラムはそれを表示します。

情報を表示するためにプログラミング言語をクリックしたときに、別の名前をクリックするとその前に上書きされ、同じ名前を再びクリックすると、その情報は非表示になります。

私は変数を格納しようとしましたが、属性を追加しようとしましたが、私はこの問題を理解できません。

私はまた

（ブートストラップはここで働いていないようです）

... addClass（のようなものを試してみました）、そこにクラスがあるか、他にそれを隠し、条件であれば、多くの場合はチェック試したい場合はjsfiddleを追加するhttps://jsfiddle.net/5ujLsssa/

Answer 1

これを達成するには、クリックした要素を.dispのすべての要素を隠すロジックから除外するだけです。 data-info属性を取得するためにattr()上data()の使用を注意してください。また

var main = function() { 
 
    $('.disp').hide(); 
 
    
 
    $('h4').on('click', function() { 
 
    var $target = $('#' + $(this).data('info')); 
 
    $('.disp').not($target).hide("200"); 
 
    $target.slideToggle("300"); 
 
    }); 
 
}; 
 

 
$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="displayInfo" class="row"> 
 
    <h4 data-info="WEB" class="col-sm-2">WEB</h4> 
 
    <h4 data-info="VBA" class="col-sm-2">VBA</h4> 
 
    <h4 data-info="C" class="col-sm-2">C</h4> 
 
    <h4 data-info="CPP" class="col-sm-2">C++</h4> 
 
    <h4 data-info="Java" class="col-sm-2">Java</h4> 
 
    </div> 
 

 
    <div id="WEB" class="disp"> 
 
    <p><u><strong>WEB</strong></u> 
 
    </p> 
 
    <p><strong>test</strong>, test, <strong>test</strong> 
 
    </p> 
 
    <p><strong>test test test</strong> 
 
     <br/>test 
 
    </p> 
 
    </div> 
 
    <div id="VBA" class="disp"> 
 
    <p><u><strong>VBA</strong></u> 
 
    </p> 
 
    <p><strong>test</strong>, test, <strong>test</strong> 
 
    </p> 
 
    <p><strong>test test test</strong> 
 
     <br/>test 
 
    </p> 
 
    </div> 
 
    <div id="C" class="disp"> 
 
    <p><u><strong>C</strong></u> 
 
    </p> 
 
    <p><strong>test</strong>, test, <strong>test</strong> 
 
    </p> 
 
    <p><strong>test test test</strong> 
 
     <br/>test 
 
    </p> 
 
    </div> 
 
    <div id="CPP" class="disp"> 
 
    <p><u><strong>C++</strong></u> 
 
    </p> 
 
    <p><strong>test</strong>, test, <strong>test</strong> 
 
    </p> 
 
    <p><strong>test test test</strong> 
 
     <br/>test 
 
    </p> 
 
    </div> 
 
    <div id="Java" class="disp"> 
 
    <p><u><strong>Java</strong></u> 
 
    </p> 
 
    <p><strong>test</strong>, test, <strong>test</strong> 
 
    </p> 
 
    <p><strong>test test test</strong> 
 
     <br/>test 
 
    </p> 
 
    </div> 
 

 
</div>

：あなたはこれを達成するためにnot()を使用することができます。