Question

我有这个样本：

代码HTML：

<div class="clasa-comuna">
  <div class="declansare">
    <span class="plus">+</span>
    <span class="minus">-</span>
  </div>
  <div class="arata"></div>
</div>
<div class="clasa-comuna">
  <div class="declansare">
    <span class="plus">+</span>
    <span class="minus">-</span>
  </div>
  <div class="arata"></div>
</div>
<div class="clasa-comuna">
  <div class="declansare">
    <span class="plus">+</span>
    <span class="minus">-</span>
  </div>
  <div class="arata"></div>
</div>

CODE CSS：

.declansare{
  background:red;
  width:100px;
  height:50px;
}
.arata{
  width:100px;
  height:100px;
  background:blue;
  display:none;
}
.clasa-comuna{
  display:inline-block;
  margin-left:10px;
}
.minus{
  display:none;
  color:white;
}
.plus{
  color:white;
}

CODE JS：

$( ".plus" ).on( "click", function() {
  $(this).closest('.clasa-comuna').find('arata').show();


  });

我想要做的是显示div "arata"它是当前元素。

我尝试过像＃39;但它会显示所有div。

 $(".arata").toggle();

我该如何解决这个问题？

我希望我能让自己明白......如果你需要更多的解释。

提前致谢！

修改

回答问题，我设法让它发挥作用但是如何只做一个保持开放？

new link

CODE JS：

$( ".plus" ).on( "click", function() {
  $(this).hide();
  $(this).closest('.clasa-comuna').find('.arata').show();
  $(this).next().show();
});

我想做的只是保持当前开放状态，不能打开多个......

编辑2：

new link 3

我接近尾声......只有一个问题。它之前仍然存在于其他质量减号中......它不允许存在而不是减去...在开放

CODE JS：

$( ".plus" ).on( "click", function() {
  $(this).hide();
  $('.arata').hide();
  //$('.arata').hide();
  $(this).closest('.clasa-comuna').find('.arata').show();
  $(this).next().show();
});

$( ".minus" ).on( "click", function() {


});

Answer 1

您遇到与所用选择相关的语法问题，您需要找到相对于当前元素的元素。

另一种简单的方法是使用类来设置可见性，如

＆＃13;

$(".plus, .minus").on("click", function() {
  var $comuna = $(this).closest('.clasa-comuna').toggleClass('open', $(this).hasClass('plus'));
  $('.clasa-comuna.open').not($comuna).removeClass('open');
});

＆＃13;

.declansare {
  background: red;
  width: 100px;
  height: 50px;
}
.arata {
  width: 100px;
  height: 100px;
  background: blue;
  display: none;
}
.clasa-comuna {
  display: inline-block;
  margin-left: 10px;
}
.clasa-comuna .minus {
  display: none;
  color: white;
}
.clasa-comuna .plus {
  color: white;
}
.clasa-comuna.open .minus {
  display: inline;
}
.clasa-comuna.open .plus {
  display: none;
}
.clasa-comuna.open .arata {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clasa-comuna">
  <div class="declansare">
    <span class="plus">+</span>
    <span class="minus">-</span>
  </div>
  <div class="arata"></div>
</div>
<div class="clasa-comuna">
  <div class="declansare">
    <span class="plus">+</span>
    <span class="minus">-</span>
  </div>
  <div class="arata"></div>
</div>
<div class="clasa-comuna">
  <div class="declansare">
    <span class="plus">+</span>
    <span class="minus">-</span>
  </div>
  <div class="arata"></div>
</div>

＆＃13;

Answer 2

使用以下JQuery只会打开一个。

$( ".plus" ).on( "click", function() {
  $('.arata').hide();
  $(this).closest('.clasa-comuna').find('.arata').show();
});

在打开div之前隐藏所有其他内容。

<强> Working Fiddle

修改

根据您的要求，我编辑了我的答案。

$( ".plus" ).on( "click", function() { $('.arata').hide(); $('.minus').hide(); $('.plus').show(); $(this).hide(); $(this).closest('.clasa-comuna').find('.arata').show(); $(this).next().show(); });

<强> Updated Fiddle

Answer 3

像这样改变CODE JS

$（“。plus”）。on（“click”，function（）{ $（本）.parent（）找到（ '矶。'）示出了（）;

}）;

你必须把“。”在arata之前，如果arata是div类，如果arata是id然后把'＃'

如何在jQuery中显示当前元素？

3 个答案: