jQuery仅在单击和切换类上切换一个具有相同类的div

Question

我正在尝试将唯一的div切换到菜单图标，并希望将div的其余部分隐藏起来。 如果打开了其中的任何一个，则将其隐藏，但单击的除外。

另外，要在菜单图标上切换“ rotate类别”，以便在打开相应的div时显示旋转，而在隐藏时将其显示为正常状态。

我无法使用以下代码来达到结果。 有人可以帮我解决这个问题吗？

码：

 $('.more-buttons').each(function() { $(this).on('click', function() { if ($(this).hasClass('rotate')) { $(this).removeClass('rotate'); } var id = $(this).attr('id'); $('#' + id).toggleClass('rotate'); $('#' + id).next('.additional-buttons-model').slideToggle('fast'); }); }); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="more-buttons" id="551"> <i class="material-icons">more_horiz</i> </div> <div class="additional-buttons-model" data-id="551"> <div class="view-buttons"> <input class="light-button" name="doedit" type="submit" value="edit"> <input class="light-button" name="doclose" type="submit" value="close"> <input class="light-button" name="dohide" type="submit" value="hide"> </div> </div> 

Answer 1

在显示单击按钮的内容之前，您必须隐藏其他内容。 我已经做到了。 查看以下代码：

 $('.more-buttons').each(function () { $(this).on('click', function () { var clickbtn = $(this); $('.more-buttons').not(clickbtn).each(function(){ $(this).removeClass('rotate'); }); var id = clickbtn.attr('id'); $('#' + id).toggleClass('rotate'); var content = $('#' + id).next('.additional-buttons-model'); $('.additional-buttons-model').not(content).each(function(){ $(this).css('display','none'); }); content.slideToggle('fast'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="more-buttons" id="551"> <i class="material-icons">more_horiz</i> </div> <div class="additional-buttons-model" data-id="551"> <div class="view-buttons"> <input class="light-button" name="doedit" type="submit" value="edit"> <input class="light-button" name="doclose" type="submit" value="close"> <input class="light-button" name="dohide" type="submit" value="hide"> </div> </div> <div class="more-buttons" id="552"> <i class="material-icons">more_horiz</i> </div> <div class="additional-buttons-model" data-id="552"> <div class="view-buttons"> <input class="light-button" name="doedit" type="submit" value="edit"> <input class="light-button" name="doclose" type="submit" value="close"> <input class="light-button" name="dohide" type="submit" value="hide"> </div> </div> <div class="more-buttons" id="553"> <i class="material-icons">more_horiz</i> </div> <div class="additional-buttons-model" data-id="553"> <div class="view-buttons"> <input class="light-button" name="doedit" type="submit" value="edit"> <input class="light-button" name="doclose" type="submit" value="close"> <input class="light-button" name="dohide" type="submit" value="hide"> </div> </div> <div class="more-buttons" id="554"> <i class="material-icons">more_horiz</i> </div> <div class="additional-buttons-model" data-id="554"> <div class="view-buttons"> <input class="light-button" name="doedit" type="submit" value="edit"> <input class="light-button" name="doclose" type="submit" value="close"> <input class="light-button" name="dohide" type="submit" value="hide"> </div> </div> 

根据评论，我添加以下代码：

$('body').not('.more-buttons').click(function () {
    var clickbtn = $('.more-buttons');
    $(clickbtn).each(function(){
        $(this).removeClass('rotate');
    });
});

$('body').not('.additional-buttons-model').click(function () {
    var content = $('.additional-buttons-model');
    $(content).each(function(){
       $(this).css('display','none');
    });
});

在脚本中添加以上代码。

Answer 2

为了达到预期的效果，您可以使用以下代码：

/* Cache the buttons. */
var btns = $('.more-buttons');

/* When a button is clicked... */
btns.on('click', function(e) {
   var
      /* Cache the clicked button. */
      btn = $(this),

      /* Cache the corresponding div. */
      div = btn.next('.additional-buttons-model');

   /* Toggle the 'rotate' class. */
   btn.toggleClass('rotate');

   /* Remove the rotate class from every button except the one clicked. */
   btns.not(btn).removeClass('rotate');

   /* Slide Up all divs but the one following the button. */
   btn.siblings('.additional-buttons-model').not(div).slideUp('fast');

   /* Slide the div following the button. */
   div.slideToggle('fast');

   /* Prevent the propagation of the event to the body. */
   e.stopPropagation();
});

/* When the user clicks on the body of the document... */
$("body").on("click", function () {
   /* Cache the buttons. */
   var btns = $(".more-buttons");

   /* Remove the 'rotate' class from all buttons. */
   btns.removeClass("rotate");

   /* Hide all divs of additional buttons. */
   btns.siblings('.additional-buttons-model').slideUp('fast');
});

简单来说，上面的代码针对div元素做了三件事：

1. 首先，它会滑动所有div元素，使其不跟随单击的button 。
2. 然后，将与单击的button相对应的div上下滑动。
3. 单击主体时，所有div元素都会向上滑动，所有图标都将失去“旋转”类。

---

注意：（ 关于您的代码 😊 ）

1. 不用使用each您只需说出$('.more-buttons').on('click', ...)即可利用jQuery在内部执行的循环。
2. 不必一遍又一遍地使用$(this) ，只需将其缓存一次并使用变量即可。 这样，每次只创建一个jQuery对象，而不是4。
3. 没有理由缓存和使用单击按钮的ID （至少在问题中提供的代码中） 。

---

片段：

 /* Cache the buttons. */ var btns = $('.more-buttons'); /* When a button is clicked... */ btns.on('click', function(e) { var /* Cache the clicked button. */ btn = $(this), /* Cache the corresponding div. */ div = btn.next('.additional-buttons-model'); /* Toggle the 'rotate' class. */ btn.toggleClass('rotate'); /* Remove the rotate class from every button except the one clicked. */ btns.not(btn).removeClass('rotate'); /* Slide Up all divs but the one following the button. */ btn.siblings('.additional-buttons-model').not(div).slideUp('fast'); /* Slide the div following the button. */ div.slideToggle('fast'); /* Prevent the propagation of the event to the body. */ e.stopPropagation(); }); /* When the user clicks on the body of the document... */ $("body").on("click", function () { /* Cache the buttons. */ var btns = $(".more-buttons"); /* Remove the 'rotate' class from all buttons. */ btns.removeClass("rotate"); /* Hide all divs of additional buttons. */ btns.siblings('.additional-buttons-model').slideUp('fast'); }); 

 /* Used to allow you to test the click on the body in the snippet. */ html, body { height: 100%; } 

 <!-- jQuery Script --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="more-buttons" id="551"> <i class="material-icons">more_horiz</i> </div> <div class="additional-buttons-model" data-id="551"> <div class="view-buttons"> <input class="light-button" name="doedit" type="submit" value="edit"> <input class="light-button" name="doclose" type="submit" value="close"> <input class="light-button" name="dohide" type="submit" value="hide"> </div> </div> <div class="more-buttons" id="552"> <i class="material-icons">more_horiz</i> </div> <div class="additional-buttons-model" data-id="552"> <div class="view-buttons"> <input class="light-button" name="doedit" type="submit" value="edit"> <input class="light-button" name="doclose" type="submit" value="close"> <input class="light-button" name="dohide" type="submit" value="hide"> </div> </div> <div class="more-buttons" id="553"> <i class="material-icons">more_horiz</i> </div> <div class="additional-buttons-model" data-id="553"> <div class="view-buttons"> <input class="light-button" name="doedit" type="submit" value="edit"> <input class="light-button" name="doclose" type="submit" value="close"> <input class="light-button" name="dohide" type="submit" value="hide"> </div> </div> 

Answer 3

请参阅jsfiddle演示。

$('.more-buttons').on('click', function () {
  if($(this).hasClass('rotate')) {
    return false;
  }

  $(this).parent().find('.additional-buttons-model').slideUp('fast');
  $(this).parent().find('.more-buttons').removeClass('rotate');

  $(this).addClass('rotate');
  $(this).next('.additional-buttons-model').slideDown('fast');
});