单击链接时更改/隐藏div

I have just began JQuery and I have an issue. Here is the code and I'll explain the problem :

我刚开始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">
	<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>

When I click on a programming language, I want to display some informations about it. Which works fine. The problem is that I don't know how to hide the information when I click on the same programming language. I mean if the VBA informations are displayed, I want it to hide when I click again on the VBA name. The toggle function works fine BUT if I don't hide the previous information div, the program will display it under.

当我点击一种编程语言时，我想显示一些关于它的信息。工作的很好。问题是，当我点击同一种编程语言时，我不知道如何隐藏信息。我的意思是如果VBA信息被显示，我想要它隐藏当我再次点击VBA名称。toggle函数运行良好，但如果我不隐藏之前的信息div，程序将显示它在下面。

I just want when I click a programming language to display informations, when I click another name it overwrites the one before and when I click the same name again it hides.

我只是希望当我点击一个编程语言来显示信息,当我点击它覆盖前一个,另一个名字当我点击它隐藏了相同的名称。

I tried to store variables, add attributs but I can't figure this problem out.

我试图存储变量，添加属性，但我不能解决这个问题。

I tried things like addClass() and check if there is the class or else hide it and a lot of if conditions..

我尝试了诸如addClass()之类的东西，并检查是否存在类或是否隐藏类以及很多if条件。

(bootstrap doesn't seem to work here)

(bootstrap在这里似乎行不通)

I also add a jsfiddle if you'd like to try things https://jsfiddle.net/5ujLsssa/

如果您想尝试https://jsfiddle.net/5ujlss/，我还添加了一个jsfiddle

1 个解决方案

#1

To achieve this you just need to exclude the clicked element from the logic that hides all the .disp elements. You can use not() to achieve this:

要完成此操作,您只需要点击元素排除在隐藏所有.disp元素的逻辑。您可以使用()来实现这一目标:

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>

Also note the use of data() over attr() to retrieve the data-info attribute.

还要注意在attr()中使用data()来检索data-info属性。

#1