当一个元素不止一个时隐藏一个元素，但当它只有一个元素时向上滑动

Question

当存在多个类型的元素时，尝试使用 .hide 方法隐藏元素，但当只有一个存在 .slideUp 时将其向上滑动。 E.G隐藏单击X时可见的那个并显示下一个，但是当可见的是最后一个时向上滑动。

下面的代码块是我尝试过的，但它没有用。当它只是一个时它仍然隐藏，它不会向上滑动。关于如何实现这一点的任何想法。

$(document).ready(function() {

   if($('.alert-box').length < 2 && $('.alert-switch').click(function () {

                 $(".alert-box:visible").slideUp(); 


}));

   });

＆＃13;

＆＃13;

// onLoad events starts here  //
$(document).ready(function() {
  $(".drop-down-plates  ul li:first-child").addClass('drop-down-link-headers');
  $("#nav-bar > ul li:not(':nth-of-type(1)')").addClass('hc');
  $(".alert-box").last().addClass("last");
  $(".alert-box").first().addClass("first");
  $(".alert-box:first").show();
});


// Alert Box Navigator clicks code loop starts here

$(document).ready(function() {
  $(".alert-box").each(function(e) {
    if (e != 0)
      $(this).hide();
  });
  $(".alert-right-arrow, .alert-count").click(function() {
    if ($(".alert-box:visible").next().length != 0)
      $(".alert-box:visible").next().show().prev().hide();
    else {
      $(".alert-box:visible").hide();
      $(".alert-box:first").show();
    }
    return false;
  });

  $(".alert-left-arrow").click(function() {
    if ($(".alert-box").prev().length != 0)
      $(".alert-box").prev().show().next().hide();
    else {
      $(".alert-box").hide();
      $(".alert-box").show();
    }
    return false;
  });
});





// Alert Box switch condition code starts here

$(document).ready(function() {
  if ($('.alert-box').length > 1) {
    $(".alert-switch").click(function() {
      $('.alert-box:visible').hide().next().show();

    });
  }
});


$(document).ready(function() {

  if ($('.alert-box').length < 2 && $('.alert-switch').click(function() {

    $(".alert-box:visible").slideUp();


  }));

});

＆＃13;

.alert-box,
.no-more {
  height: auto;
  width: 80%;
  float: left;
  position: relative;
  padding: 10px 0 20px 0;
  display: none;
  color: #fff;
}
.no-more {
  background-color: #29568F;
  background-image: url(images/black-twill.png);
  text-align: center;
}
.alert-box.yellow {
  background-color: #FCF8E3;
  color: #D83F26;
}
.alert-box.red {
  background-color: #D64024;
  color: #fff;
}
.alert-box.blue {
  background-color: #6EBAEC;
  color: #fff;
}
.alert-left-arrow,
.alert-right-arrow {
  width: 5%;
  height: 50px;
  font-size: 30px;
  color: #fff;
  opacity: 0.60;
  cursor: pointer;
  position: absolute;
  left: 25px;
  bottom: 0;
  top: 0;
}
.alert-box.red .alert-left-arrow,
.alert-box.red .alert-right-arrow,
.alert-box.red .alert-switch,
.alert-box.blue .alert-switch {
  color: #fff;
}
.alert-box.yellow .alert-left-arrow,
.alert-box.yellow .alert-right-arrow,
.alert-box.yellow .alert-switch {
  color: #D83F26!important;
}
.alert-content {
  float: left;
  width: 90%;
  padding: 5px 25px 5px 25px;
  font-weight: lighter;
  font-size: 17px;
}
.alert-content h5 {
  font-size: 24px;
  font-weight: normal;
}
.alert-left-arrow:hover,
.alert-right-arrow:hover,
.alert-switch:hover {
  opacity: 1;
}
.alert-box .alert-right-arrow {
  left: 55px;
}
.alert-switch {
  position: absolute;
  right: 25px;
  top: -15px;
  font-size: 10px;
  font-weight: lighter;
  width: 25px;
  height: 13px;
  padding: 20px 0 5px 0;
  text-align: center;
  cursor: pointer;
  z-index: 9;
  color: inherit!important;
  -ms-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  opacity: 0.40;
}
.alert-switch,
.alert-count {
  -ms-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  opacity: 0.40;
  cursor: pointer;
}
.red .alert-switch,
.red .alert-count {
  border: solid 1px #fff;
  color: #fff;
}
.yellow .alert-switch,
.yellow .alert-count {
  border: solid 1px #D64024;
  color: #D64024;
}
.blue .alert-switch,
.blue .alert-count {
  border: solid 1px #fff;
  color: #fff;
}
.no-clicks {
  pointer-events: none!important;
  opacity: 0.20;
  cursor: not-allowed;
}
/** Alert Count CSS **/

.alert-count {
  width: auto;
  max-width: 80px;
  height: 10px;
  font-size: 14px;
  text-align: right;
  margin: 0 10px 0 0;
  float: right;
  position: relative;
  padding: 3px 5px 12px 5px!Important;
}
.alert-count:hover {
  opacity: 1;
}
/** Alert Navigator Styling starts here **/

.alert-navigator {
  width: 920px;
  height: auto;
  float: left;
  padding: 0 25px 5px 25px;
  position: relative;
  margin-top: 20px;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="alerts">
  <div class="alert-box red">

    <div class="alert-switch">
      <i class="fa fa-times"></i>
    </div>
    <!-- End Alert Switch -->

    <div class="alert-content">
      <h5>Very important alert!</h5>
      bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
    <!-- End Alert Content -->
    <div class="alert-navigator">
      <div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
      </div>
      <!-- End Left Arrow -->
      <div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
      </div>
      <!-- End right Arrow -->
      <div class="alert-count"></div>
      <!-- End Alert Count -->
    </div>
    <!-- End Alert Nagigator -->

  </div>
  <!-- End Alert Box -->

  <div class="alert-box yellow">

    <div class="alert-switch">
      <i class="fa fa-times"></i>
    </div>
    <!-- End Alert Switch -->

    <div class="alert-content">
      <h5>Very important alert!</h5>
      bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
    <!-- End Alert Content -->
    <div class="alert-navigator">
      <div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
      </div>
      <!-- End Left Arrow -->
      <div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
      </div>
      <!-- End right Arrow -->
      <div class="alert-count"></div>
      <!-- End Alert Count -->
    </div>
    <!-- End Alert Nagigator -->

  </div>
  <!-- End Alert Box -->


  <div class="alert-box blue">

    <div class="alert-switch">
      <i class="fa fa-times"></i>
    </div>
    <!-- End Alert Switch -->

    <div class="alert-content">
      <h5>Very important alert!</h5>
      bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
    <!-- End Alert Content -->
    <div class="alert-navigator">
      <div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
      </div>
      <!-- End Left Arrow -->
      <div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
      </div>
      <!-- End right Arrow -->
      <div class="alert-count"></div>
      <!-- End Alert Count -->
    </div>
    <!-- End Alert Nagigator -->

  </div>
  <!-- End Alert Box -->



</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

http://jsfiddle.net/fskz7rcj/4/

---

// Alert Box switch condition code starts here
$(".alert-switch").on("click", function(){
    if($(".alert-box:visible")[0] === $(".alert-box:last")[0])
        $('.alert-box:visible').slideUp(1000, function(){
            $('.alert-box').first().show();
        });
    else $('.alert-box:visible').hide().next().show();
});

---