jQuery在click和toggle类中只切换一个具有相同类的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. 然后，它向上或向下滑动与所点击的div对应的button。
3. 点击正文后，所有div元素都会滑动，所有图标都会失去“旋转”状态。类。

注意： （关于您的代码 ）

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

<强>段：

＆＃13;
＆＃13;
/* 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');
});
＆＃13;
/* Used to allow you to test the click on the body in the snippet. */
html, body {
   height: 100%;
}
＆＃13;
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

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');
});