Question

好的，这是修改后的问题。我很抱歉它很糟糕。

我想做的是：

如果我切换（）元素，我如何隐藏具有相同类的任何其他元素。这是JS小提琴。我已经尝试过siblings（）和Not（），但由于某种原因，我似乎无法让它工作。

<div class="biotitle"> Title One</div>
<div class="bio"> Bio One </div>
<div class="biotitle">Title Two </div>
<div class="bio"> Bio Two</div>
<div class="biotitle">Title Three </div>
<div class="bio">Bio THree </div>
<div class="biotitle"> Title FOUR</div>
<div class="bio">Bio Four </div>
<div class="biotitle">Title Five</div>
<div class="bio"> Bio Five</div>

$(".bio").hide();
$( ".biotitle" ).click(function() {

 $(this).next(".bio").toggle("medium");

});

https://jsfiddle.net/mzt9wqj5/6/

如果我添加$（“。bio”）。hide（）;之前“$（this）.next（”。bio“）。toggle（”medium“）;”它具有所需的效果，除非我点击当前元素它保持重新打开它。

更新：我认为这是解决方案： $（本）的.next（ “生物 ”）切换（“ 培养基 ”）的兄弟姐妹（“ 生物”）隐藏（）;

Answer 1

尽管解释不好，但我相信我理解你想要实现的目标。

我这样读了你的问题：

如何切换前一个元素的相邻元素的可见性单击兄弟姐妹？

首先，让我先说一下id属性在整个文档中应该是唯一的。共享品质的元素，使用class属性。

因此，让我们看看您的代码修正案。这里有一个CSS样式，标记更改和代码调整：

＆＃13;

$('.bio').hide();

$('.biotitle').click( function () {
  
  // get the adjacent bio and show it through show class
  var $adjacent = $(this).next('.bio').toggle('medium');
  
  // get all bio's (except adjacent) and hide all by removing show class
  $('.bio').not($adjacent).hide('medium');
  
});

＆＃13;

.biotitle {
  padding:20px;
  background:tomato;
  Color:white;
  cursor:pointer
}

.bio {
  background:#333;
  padding:30px;
  color:#eee;
  margin-bottom:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="biotitle"> Title 1 </div>
<div class="bio"> Bio 1 </div>
<div class="biotitle"> Title 2 </div>
<div class="bio"> Bio 2 </div>
<div class="biotitle"> Title 3 </div>
<div class="bio"> Bio 3 </div>
<div class="biotitle"> Title 4 </div>
<div class="bio"> Bio 4 </div>
<div class="biotitle"> Title 5 </div>
<div class="bio"> Bio 5 </div>

＆＃13;

如您所见，此代码段使用CSS样式，HTML标记和JAvaScript / jQuery代码的混合来实现所需。

<强> 更新

根据你的小提琴，我对你想要的是正确的。唯一的区别是我使用CSS类隐藏/显示属性，而CSS样式略有不同。我已经更新了我的代码示例，以向您展示您需要的内容。

点击蓝色＆＃39;运行代码段＆＃39;在这个答案中的按钮，看到代码在行动。我还更新了your fiddle here以显示同样的事情。

查找与NEXT匹配的特定ID的所有元素

1 个答案: