jquery - 单击链接时更改/隐藏 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">
	<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>

当我点击一种编程语言时，我想显示一些有关它的信息。效果很好。问题是，当我点击相同的编程语言时，我不知道如何隐藏信息。我的意思是，如果显示 VBA 信息，我希望当我再次单击 VBA 名称时将其隐藏。 toggle 功能工作正常，但如果我不隐藏以前的信息 div，程序会将其显示在下面。

我只想当我单击一种编程语言时显示信息，当我单击另一个名称时它会覆盖之前的名称，当我再次单击相同的名称时它会隐藏。

我尝试存储变量，添加属性，但我无法解决这个问题。

我尝试了诸如 addClass() 之类的方法并检查是否存在该类，否则隐藏它以及很多 if 条件..

( Bootstrap 在这里似乎不起作用)

如果你想尝试的话我还添加了一个jsfiddle https://jsfiddle.net/5ujLsssa/

Answer 1

要实现此目的，您只需从隐藏所有 .disp 元素的逻辑中排除单击的元素即可。您可以使用 not() 来实现此目的:

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>

另请注意在 attr() 上使用 data() 来检索 data-info 属性。