Question

我正在尝试找出一种不同的方法，以了解如何编写此代码的其他可能性。

如果可能的话，我还想在关闭时在侧面添加 + ，在打开时添加-。

$(document).ready(function() {
$(".pst_contenido > .mod100 > .pill > .caracteristicas").addClass('inactive'); 
$(".inactive").hide();

$(".boton_mas").click(function(){

  if ($(this).parent().next(".caracteristicas").hasClass('active')) {

    $(this).parent().next(".caracteristicas").removeClass('active');  
    $(this).parent().next(".caracteristicas").addClass('inactive');     
    $(this).parent().next(".caracteristicas").hide();

  }else{

    $(".pst_contenido > .mod100 > .pill > .caracteristicas").addClass('inactive');
    $(".pst_contenido > .mod100 > .pill > .caracteristicas").hide();
    $(".pst_contenido > .mod100 > .pill > .caracteristicas").removeClass('active');

    $(this).parent().next(".caracteristicas").removeClass('inactive');
    $(this).parent().next(".caracteristicas").addClass('active'); 
    $(this).parent().next(".caracteristicas").show();

  }
});  
});

Fiddle

Answer 1

您可以做一些简单的事情：

$(document).ready(function() {
  $(".caracteristicas").addClass('inactive'); 
  $(".inactive").hide();

    $(".boton_mas").click(function(){
        $caracteristicas = $(this).parent().next(".caracteristicas");
        $(".caracteristicas").not($caracteristicas).addClass('inactive').removeClass('active').hide();
         $caracteristicas.toggleClass('active inactive').toggle();

    });  
});

demo

Answer 2

这是另一个解决方案

   $(".itemContent > h3").click(function(){
    var hidableDiv = $(this).closest("div").find("div").first();
    

    if(!hidableDiv.hasClass("toggableTextInfo")){
       hidableDiv.toggleClass("toggableTextInfo");
       return;
    }
    else
    {
       $(".itemContent").each(function() {
          $(this).find("div").first().addClass("toggableTextInfo");
       });
       hidableDiv.toggleClass("toggableTextInfo");
    }
})

h3{
  cursor: pointer;
}

.toggableTextInfo{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="itemContainer">
  <div class="itemContent">
      <h3>Item 1</h3>
      <div class="toggableTextInfo">
        Hello
      </div>
  </div>
</div>
<div class="itemContainer">
  <div class="itemContent">
      <h3>Item 2</h3>
      <div class="toggableTextInfo">
        Byee
      </div>
  </div>
</div>

使用jQuery扩展菜单

2 个答案: