Question

我试图使用展开/折叠容器，除了一个小细节外，一切都有效。我想限制最终用户一次打开多个容器。理想情况下，我只希望一次扩展一个容器。

Answer 1

您需要一些对象来保存应用程序状态。你可以创建一个变量，如

var expanded = false;

然后将上面的代码包装在一个语句中，以便在单击以展开项目

时

if (!expanded) {
    // proceed as normally
    expanded = true;
} else {
    // stop action from happening
    return;
}

编辑：

当您点击减号

时，您还希望将展开更改回false

编辑编辑：我对您的链接进行了一些修改

http://jsfiddle.net/eo1Ljw97/

Answer 2

您可以隐藏其他大框元素，例如

$(window).load(function() {
  if ($(".navBoxes").length > 0) {
    var html = document.getElementsByTagName("html").item(0);
    var hasCSS3 = (html.className.indexOf("no-csstransforms") == -1)

    $(".no-csstransforms .larger").toggleClass("undisplayed");
    $(".larger").children().toggleClass("undisplayed");

    //	Expand nav box
    $(".nav.plus").click(function() {
      var smallerBox = $(this).closest(".navBox");
      var largerBox = smallerBox.next();
      var $ol = $(this).closest('.navBoxes').find('.navBox.larger').not(largerBox);

      if (hasCSS3) {
        //smallerBox.siblings(".smaller").toggleClass("contracted");
        //smallerBox.siblings(".smaller").toggleClass("hidden");
        //smallerBox.children().toggleClass("hidden");
        //smallerBox.toggleClass("expanded").delay(600).toggleClass("hidden");
        largerBox.toggleClass("atop").delay(600).toggleClass("hidden");
        $ol.removeClass('atop').addClass('hidden');
      } else {
        //smallerBox.toggleClass("undisplayed");
        //smallerBox.siblings(".smaller").toggleClass("undisplayed");
        largerBox.toggleClass("undisplayed");
        $ol.addClass('undisplayed')
      }


      largerBox.children().toggleClass("undisplayed");
      $ol.children().addClass("undisplayed");
      return false;
    });

    //	Contract nav box
    $(".nav.minus").click(function() {
      var largerBox = $(this).parents(".navBox");
      var smallerBox = largerBox.prev();

      largerBox.children().toggleClass("undisplayed");

      if (hasCSS3) {
        largerBox.toggleClass("hidden");
        largerBox.toggleClass("atop")
          //smallerBox.toggleClass("hidden");
          //smallerBox.toggleClass("expanded");
          //smallerBox.children().toggleClass("hidden");
          //smallerBox.siblings(".smaller").toggleClass("hidden");
          //smallerBox.siblings(".smaller").toggleClass("contracted");
      } else {
        largerBox.toggleClass("undisplayed");
        //smallerBox.toggleClass("undisplayed");
        //smallerBox.siblings(".smaller").toggleClass("undisplayed");
      }

      return false;
    });
  }
  setOrgChartDimensions();
})(jQuery);

.navBoxes .undisplayed {
  display: none;
}
.navBoxes .navBox {
  position: absolute;
  float: left;
  color: #fff;
}
.navBoxes .navBox.smaller {
  width: 160px;
  height: 160px;
  z-index: 2;
}
.navBoxes .navBox.smaller.atop {
  z-index: 4;
}
.navBoxes .navBox.larger {
  width: inherit;
  z-index: 1;
}
.navBoxes .navBox.hidden {
  opacity: 0.0;
}
.navBoxes .navBox.larger.atop {
  z-index: 3;
}
.navBoxes .navBox.larger .icon {
  float: left;
}
.navBoxes .navBox.smaller a {
  color: #fff;
}
.navBoxes .navBox.larger .title {
  position: relative;
  top: 10px;
}
.navBoxes .navBox.larger .body {
  margin-top: 20px;
}
.navBoxes .navBox.larger .body a {
  color: #fff;
  text-decoration: underline;
}
.navBoxes .navBox .nav {
  position: absolute;
  width: 35px;
  height: 30px;
  padding-top: 5px;
}
.navBoxes .navBox .nav a {
  color: #fff;
}
.navBoxes .navBox .nav.plus {
  top: 110px;
  left: 110px;
}
.navBoxes .navBox .nav.minus {
  position: relative;
  float: right;
}
.navBoxes .box1 {
  background-color: #185394;
  transform-origin: top left;
}
.navBoxes .box1.smaller:hover {
  background-color: #214872;
}
.navBoxes .box2 {
  background-color: #c94747;
  transform-origin: top right;
}
.navBoxes .box2.smaller:hover {
  background-color: #b24444;
}
.navBoxes .box2.smaller {
  margin-left: 180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navBoxes">
  <div class="navBox box1 smaller">
    <div class="title"><a href="#">Heading 1</div>
		<div class="nav plus">
			<div class="sign"><a aria-expanded="false" href="/">more</a>
    </div>
  </div>
</div>
<div class="navBox box1 larger hidden">
  <div class="body">
    <p>- Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text -</p>
  </div>
  <div class="nav minus">
    <div class="sign"><a aria-expanded="true" href="/">less</a>
    </div>
  </div>
</div>
<div class="navBox box2 smaller">
  <div class="title"><a href="#">Heading 2</a>
  </div>
  <div class="nav plus">
    <div class="sign"><a aria-expanded="false" href="/">more</a>
    </div>
  </div>
</div>
<div class="navBox box2 larger hidden">
  <div class="body">
    <p>- Some Text - Some Text - Some Text - Some Text -</p>
  </div>
  <div class="nav minus">
    <div class="sign"><a aria-expanded="true" href="/">less</a>
    </div>
  </div>
</div>
</div>

如何在点击时只启用一个容器？

2 个答案: