Question

我需要能够点击div，显示其中的文本，然后点击另一个div时，隐藏其他div中的所有其他文本，并在点击的div中显示文本。

此处代码

<div class="myClass"><span>First</span></div>
<div class="myClass"><span>Second</span></div>
<div class="myClass"><span>Third</span></div>

.myClass{
    height:50px;
    width:100%;
    background-color:red;
    margin:2px;
}
.myClass span{
  display:none;
}

$(".myClass").click(function() {
  // Hide all item spans
  $(".myClass span").hide();
  // Show the element next to this
  $(this).first().show();
});

Answer 1

这将有效：See fiddle

$(".myClass").click(function() {
  // Hide all item spans
  $(".myClass span").hide();
  // Show the element next to this
  $(this).find('span').show();
});

Answer 2

你需要使用.find('span')来获得子女：

$(this).find('span').show();

<强> Working Demo

Answer 3

use .find in Jquery;  the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. 

$(this).find('span').show();

or .has() in jquery Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

$(this).has('span').show();

Answer 4

使用jQuery的not()函数排除您希望从隐藏过程中显示的项目。

$(".myClass").on('click', function () {
    // Store a reference to the element we want to show
    var shownElement = $(this).find('span');
    // Ensure 'shownElement' is shown
    shownElement.show();
    // Hide everything apart from 'shownElement'
    $(".myClass span").not(shownElement).hide();
});

<强> See this working fiddle

Answer 5

你的意思是手风琴..看看这个jquery plugin。很容易......

或者如果thruegh代码..

$(".myClass").click(function() {
  $(".myClass span").css('display','none');
  $(this).find('span').css('display','block');
});

仅显示单击元素的文本

5 个答案: