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似乎在这里不起作用）

如果您想尝试https://jsfiddle.net/5ujLsssa/

，我还会添加一个jsfiddle

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>

另请注意，使用data()而不是attr()来检索data-info属性。

单击链接时更改/隐藏div

1 个答案: