如何点击外部关闭菜单框JavaScript

Question

我真的很困惑为什么我仍然无法做这个js，整整1天我学会了你，但是什么都没有，这让我整天都很头疼。

这是我的代码：https://codepen.io/nailaahmad/pen/LGRxWJ

简单示例我尝试广告

 $(document).on('click',function(){
   $('.card').collapse('hide');
});

和这个

$('body').click(function(event){
  // check if the clicked element is a descendent of navigation 
  if ($(event.target).closest('.card').length) {
    return; //do nothing if event target is within the navigation
  }
});

＆＃13;

＆＃13;

var $cell = $('.card');

//open and close card when clicked on card
$cell.find('.js-expander').click(function() {

  var $thisCell = $(this).closest('.card');

  if ($thisCell.hasClass('is-collapsed')) {
    $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
    $thisCell.removeClass('is-collapsed').addClass('is-expanded');

    if ($cell.not($thisCell).hasClass('is-inactive')) {
      //do nothing
    } else {
      $cell.not($thisCell).addClass('is-inactive');
    }

  } else {
    $thisCell.removeClass('is-expanded').addClass('is-collapsed');
    $cell.not($thisCell).removeClass('is-inactive');
  }
});

//close card when click on cross
$cell.find('.js-collapser').click(function() {

  var $thisCell = $(this).closest('.card');

  $thisCell.removeClass('is-expanded').addClass('is-collapsed');
  $cell.not($thisCell).removeClass('is-inactive');

});

＆＃13;

$light-gray: #eceef1;
$gray: darken(#eceef1, 30%);
$slate: darken(#eceef1, 70%);
$turquoise: #1abc9c;
* {
  box-sizing: border-box;
}

body {
  background: $light-gray;
  font-family: 'Slabo 27px', serif;
  color: $slate;
}

.wrapper {
  margin: 5em auto;
  max-width: 1000px;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
}

.header {
  padding: 30px 30px 0;
  text-align: center;
  &__title {
    margin: 0;
    text-transform: uppercase;
    font-size: 2.5em;
    font-weight: 500;
    line-height: 1.1;
  }
  &__subtitle {
    margin: 0;
    font-size: 1.5em;
    color: $gray;
    font-family: 'Yesteryear', cursive;
    font-weight: 500;
    line-height: 1.1;
  }
}

//Grid Container
.cards {
  padding: 15px;
  display: flex;
  flex-flow: row wrap;
}

//Cards
.card {
  margin: 15px;
  width: calc((100% / 3) - 30px);
  transition: all 0.2s ease-in-out;
  //media queries for stacking cards
  @media screen and (max-width: 991px) {
    width: calc((100% / 2) - 30px);
  }
  @media screen and (max-width: 767px) {
    width: 100%;
  }
  &:hover {
    .card__inner {
      background-color: $turquoise;
      transform: scale(1.05);
    }
  }
  &__inner {
    width: 100%;
    padding: 30px;
    position: relative;
    cursor: pointer;
    background-color: $gray;
    color: $light-gray;
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    transition: all 0.2s ease-in-out;
    &:after {
      transition: all 0.3s ease-in-out;
    }
    .fa {
      width: 100%;
      margin-top: .25em;
    }
  }
  //Expander
  &__expander {
    transition: all 0.2s ease-in-out;
    background-color: $slate;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: $light-gray;
    font-size: 1.5em;
    .fa {
      font-size: 0.75em;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      &:hover {
        opacity: 0.9;
      }
    }
  }
  &.is-collapsed {
    .card__inner {
      &:after {
        content: "";
        opacity: 0;
      }
    }
    .card__expander {
      max-height: 0;
      min-height: 0;
      overflow: hidden;
      margin-top: 0;
      opacity: 0;
    }
  }
  &.is-expanded {
    .card__inner {
      background-color: $turquoise;
      &:after {
        content: "";
        opacity: 1;
        display: block;
        height: 0;
        width: 0;
        position: absolute;
        bottom: -30px;
        left: calc(50% - 15px);
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #333a45;
      }
      //folder open icon
      .fa:before {
        content: "\f115";
      }
    }
    .card__expander {
      max-height: 1000px;
      min-height: 200px;
      overflow: visible;
      margin-top: 30px;
      opacity: 1;
    }
    &:hover {
      .card__inner {
        transform: scale(1);
      }
    }
  }
  &.is-inactive {
    .card__inner {
      pointer-events: none;
      opacity: 0.5;
    }
    &:hover {
      .card__inner {
        background-color: $gray;
        transform: scale(1);
      }
    }
  }
}

//Expander Widths
//when 3 cards in a row
@media screen and (min-width: 992px) {
  .card:nth-of-type(3n+2) .card__expander {
    margin-left: calc(-100% - 30px);
  }
  .card:nth-of-type(3n+3) .card__expander {
    margin-left: calc(-200% - 60px);
  }
  .card:nth-of-type(3n+4) {
    clear: left;
  }
  .card__expander {
    width: calc(300% + 60px);
  }
}

//when 2 cards in a row
@media screen and (min-width: 768px) and (max-width: 991px) {
  .card:nth-of-type(2n+2) .card__expander {
    margin-left: calc(-100% - 30px);
  }
  .card:nth-of-type(2n+3) {
    clear: left;
  }
  .card__expander {
    width: calc(200% + 30px);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

  <div class="header">
    <h1 class="header__title">Expanding Card Grid</h1>
    <h2 class="header__subtitle">with Flexbox</h2>
  </div>

  <div class="cards">

    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>Card</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i> Expander
      </div>
    </div>

    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>Card</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i> Expander
      </div>
    </div>

    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>Card</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i> Expander
      </div>
    </div>

    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>Card</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i> Expander
      </div>
    </div>

    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>Card</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i> Expander
      </div>
    </div>

    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>Card</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i> Expander
      </div>
    </div>

    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>Card</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i> Expander
      </div>
    </div>

    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>Card</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i> Expander
      </div>
    </div>

    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>Card</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i> Expander
      </div>
    </div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从班级 .card.is-inactive .card__inner

删除指针 - 事件：无;

Codepen：https://codepen.io/creativedev/pen/WyvVvm

更新了css：

<div onclick="first()">
//first div
<div onclick="second()">
//second div
<div onclick="third()">
//my content here inner div
</div>
</div>
</div>

Answer 2

您的初步尝试无效的原因是因为该框会立即展开和关闭。

您需要做的是将扩展代码包装在1个执行周期的超时中，以便在document.click处理程序中检查是否有任何展开的框。

此外，我还提供了一个查看光标点击坐标的功能，以确定点击是否在扩展框之外。

Working CodePen here

完整的代码是：

var $cell = $('.card');

//open and close card when clicked on card
$cell.find('.js-expander').click(function() {

    var $thisCell = $(this).closest('.card');
    setTimeout(function () {
        if ($thisCell.hasClass('is-collapsed')) {
            $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
            $thisCell.removeClass('is-collapsed').addClass('is-expanded');

            if ($cell.not($thisCell).hasClass('is-inactive')) {
                //do nothing
            } else {
                $cell.not($thisCell).addClass('is-inactive');
            }

        } else {
            $thisCell.removeClass('is-expanded').addClass('is-collapsed');
            $cell.not($thisCell).removeClass('is-inactive');
        }
    });
});

//close card when click on cross
$cell.find('.js-collapser').click(function() {

    var $thisCell = $(this).closest('.card');

    $thisCell.removeClass('is-expanded').addClass('is-collapsed');
    $cell.not($thisCell).removeClass('is-inactive');

});

处理外部点击的新功能是：

$(document).click(function (event) {
    if (!$(".is-expanded").length) {return;}

    var expandedCard = $(".is-expanded .card__expander");
    var expandedCardPosition = $(".is-expanded .card__expander").position();

    var expandedCardStartingX = expandedCardPosition.left;
    var expandedCardEndingX = expandedCardStartingX + expandedCard.width();

    var expandedCardStartingY = expandedCardPosition.top;
    var expandedCardEndingY = expandedCardStartingY + expandedCard.height();

    var clickedInside = event.pageX >= expandedCardStartingX && event.pageX <= expandedCardEndingX
        && event.pageY >= expandedCardStartingY && event.pageY <= expandedCardEndingY;

    if (!clickedInside) {
        $(".is-expanded .js-collapser").click();
    }
});

希望这能完成这项工作：）