仅显示子div,隐藏所有其他div

时间:2016-03-31 19:34:31

标签: jquery

我对jQuery有点新,但我有以下内容:

use org\bovigo\vfs\vfsStream;
use App\Libraries\Unlink;

class UnlinkTest extends \PHPUnit_Framework_TestCase {

    public function setUp() {
        $root = vfsStream::setup('home');
        $removeFile = new Unlink();
    }

    public function tearDown() {
        $root = null;
    }

    public function testUnlink() {
        $root = vfsStream::setup('home');
        $removeFile = new Unlink();
        vfsStream::newFile('test.txt', 0744)->at($root)->setContent("The new contents of the file");
        $this->$removeFile->unlinkFile(vfsStream::url('home/test.txt'));
        $this->assertFalse(var_dump(file_exists(vfsStream::url('home/test.txt'))));
    }

}

?>

我将team-member-text div设置为<div class="team-member"> <p>John Doe</p> <div class="team-member-text"Lorem Ipsum</div> </div> ...several others... <div class="team-member"> <p>Jane Doe</p> <div class="team-member-text"Lorem Ipsum</div> </div> 。当用户点击团队成员div时,我想展开该子display:none div并隐藏任何open {{1在页面上的divs。

我对隐藏部分的工作除外。这就是我所拥有的。

team-member-text

再次点击它会隐藏然后重新显示。

我发现了类似的问题,但它们似乎并不完全相同。

2 个答案:

答案 0 :(得分:2)

问题是this不是.team-member-text元素,而是.team-member元素。

jQuery(function($) {

    $( ".team-member" ).on('click', function() {

        var thisOne = $(this).find(".team-member-text");

        $('.team-member-text').not(thisOne).hide();

        thisOne.show( "slow", function() {  });

    });
});

答案 1 :(得分:0)

你也可以这样写。

$(document).ready(function(){
     $(".team-member").click(function() {
         $("div.team-member-text").not($(this).find("div.team-member-text")).hide();
         $(this).find("div.team-member-text").show();
         //or
         $(this).siblings("div.team-member").find("div.team-member-text")).hide();    
     });
});

给你一点解释

点击team-member div后,我正在检查所有team-member-text div,但这不是当前的孩子并隐藏它们。

接下来我正在展示当前的孩子。

另一种方法是检查所有兄弟div team-member并找到他们的孩子隐藏它们。