0
我正試圖實現紙卡功能。如何只允許一個容器擴大點擊？
一切似乎工作正常，但我不能限制只有一個容器擴大更多的點擊。我可以一次打開多個容器，這不是我想要的。我想活動容器自動關閉，因爲我試圖打開另一個。這裏是我的代碼： HMTL：
(function ($) {
\t $(window).load(function(){
\t \t if ($(".navBoxes").length > 0)
\t \t {
\t \t \t var html = document.getElementsByTagName("html").item(0);
\t \t \t var hasCSS3 = (html.className.indexOf("no-csstransforms") == -1)
\t \t \t
\t \t \t $(".no-csstransforms .larger").toggleClass("undisplayed");
\t \t \t $(".larger").children().toggleClass("undisplayed");
\t \t \t
\t \t \t // \t Expand nav box
\t \t \t $(".nav.plus").click(function(){
$(".openedBox").addClass("undisplayed").removeClass("openedBox");
var smallerBox = $(this).parents(".navBox");
\t \t \t \t var largerBox = smallerBox.next();
\t \t \t \t
\t \t \t \t if (hasCSS3)
\t \t \t \t {
\t \t \t \t \t //smallerBox.siblings(".smaller").toggleClass("contracted");
\t \t \t \t \t //smallerBox.siblings(".smaller").toggleClass("hidden");
\t \t \t \t \t //smallerBox.children().toggleClass("hidden");
\t \t \t \t \t //smallerBox.toggleClass("expanded").delay(600).toggleClass("hidden");
\t \t \t \t \t largerBox.toggleClass("atop").delay(600).toggleClass("hidden");
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t //smallerBox.toggleClass("undisplayed");
\t \t \t \t \t //smallerBox.siblings(".smaller").toggleClass("undisplayed");
\t \t \t \t \t largerBox.toggleClass("undisplayed");
\t \t \t \t }
\t \t \t \t
\t \t \t \t largerBox.children().toggleClass("undisplayed");
largerBox.addClass("openedBox");
return false;
\t \t \t });
\t \t \t
\t \t \t // \t Contract nav box
\t \t \t $(".nav.minus").click(function(){
var largerBox = $(this).parents(".navBox");
$(".openedBox").addClass("undisplayed").removeClass("openedBox");
\t \t \t \t var smallerBox = largerBox.prev();
\t \t \t \t
\t \t \t \t largerBox.children().toggleClass("undisplayed");
\t \t \t \t
\t \t \t \t if (hasCSS3)
\t \t \t \t {
\t \t \t \t \t largerBox.toggleClass("hidden");
\t \t \t \t \t largerBox.toggleClass("atop")
\t \t \t \t \t //smallerBox.toggleClass("hidden");
\t \t \t \t \t //smallerBox.toggleClass("expanded");
\t \t \t \t \t //smallerBox.children().toggleClass("hidden");
\t \t \t \t \t //smallerBox.siblings(".smaller").toggleClass("hidden");
\t \t \t \t \t //smallerBox.siblings(".smaller").toggleClass("contracted");
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t largerBox.toggleClass("undisplayed");
\t \t \t \t \t //smallerBox.toggleClass("undisplayed");
\t \t \t \t \t //smallerBox.siblings(".smaller").toggleClass("undisplayed");
\t \t \t \t }
\t \t \t \t
\t \t \t \t return false;
\t \t \t }); \t
\t \t }
\t \t setOrgChartDimensions();
\t });
})(jQuery);.navBoxes{
\t width: 522px;}
.navBoxes .undisplayed
{display: none;}
.navBoxes .navBox
{position: absolute;
\t float: left;
\t clear: none;
\t padding: 0 15px;
\t color: #fff;
\t font-family: Helvetica;
\t box-sizing: border-box;}
.navBoxes .navBox.smaller{
\t width: 160px;
\t height: 160px;
\t z-index: 2;
\t text-align: center;
\t cursor: pointer;}
.navBoxes .navBox.smaller.atop{z-index: 4;}
.navBoxes .navBox.larger
{height: auto;
opacity: 0.95;
overflow: auto;
width: inherit;
z-index: 1;
\t filter: alpha(opacity=95); /* For IE8 and earlier */}
.navBoxes .navBox.hidden
{opacity: 0.0;}
.navBoxes .navBox.larger.atop
{z-index: 3;}
.navBoxes .navBox.larger .icon{
\t float: left;
\t margin-right: 10px;}
.navBoxes .navBox .title
{font-weight: 600;
\t font-size: 17px;
\t line-height: 20px;}
.navBoxes .navBox.smaller .title
{margin-top: 8px;}
.navBoxes .navBox.smaller a
{color: #fff;}
.navBoxes .navBox.larger .title
{position: relative;
\t top: 10px;}
.navBoxes .navBox.larger .body
{margin-top: 20px;}
.navBoxes .navBox.larger .body a
{ \t color: #fff;
\t text-decoration: underline;}
.navBoxes .navBox .nav
{ \t position: absolute;
\t width: 35px;
\t height: 30px;
\t padding-top: 5px;
\t text-align: center;
\t cursor: pointer;
\t box-sizing: border-box;
\t -webkit-box-sizing: border-box;
\t -moz-box-sizing: border-box;}
.navBoxes .navBox .nav a
{ \t color: #fff;
\t text-decoration: none;}
.navBoxes .navBox .nav.plus
{ \t top: 110px;
\t left: 110px;}
.navBoxes .navBox .nav.minus
{ \t position:relative;
\t float:right; }
.navBoxes .box1
{ \t background-color: #185394;
\t transform-origin: top left;}
.navBoxes .box1.smaller:hover
{ \t background-color: #214872;}
.navBoxes .box2
{ \t background-color: #c94747;
\t transform-origin: top right;}
.navBoxes .box2.smaller:hover{background-color: #b24444;}
.navBoxes .box2.smaller{margin-left: 180px;}<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="navBoxes">
\t <div class="navBox box1 smaller">
\t \t <div class="title"><a href="#">Heading 1</div>
\t \t <div class="nav plus">
\t \t \t <div class="sign"><a aria-expanded="false" href="/">more</a></div>
\t \t </div>
\t </div>
\t <div class="navBox box1 larger hidden">
\t \t <div class="body">
\t \t <p>- Some Text - Some Text - Some Text - Some Text -</p>
\t \t </div>
\t \t <div class="nav minus">
\t \t \t <div class="sign"><a aria-expanded="true" href="/">less</a></div>
\t \t </div>
\t </div>
\t <div class="navBox box2 smaller">
\t \t <div class="title"><a href="#">Heading 2</a></div>
\t \t <div class="nav plus">
\t \t \t <div class="sign"><a aria-expanded="false" href="/">more</a></div>
\t \t </div>
\t </div>
\t <div class="navBox box2 larger hidden">
\t \t <div class="body">
\t \t \t <p>- Some Text - Some Text - Some Text - Some Text -</p>
\t \t </div>
\t \t <div class="nav minus">
\t \t \t <div class="sign"><a aria-expanded="true" href="/">less</a></div>
\t \t </div>
\t </div>
</div>
</html>
您需要設置一個代表「擴展」分區一類。可以說，只要展開，就可以設置「openedBox」類。現在你可以在設置這個類之前使用jQuery來搜索具有該類的所有元素$（「openedBox」）。removeClass（「openedBox」）。hide（）;'並且它們不會顯示，然後你添加類到當前框 – Saar
順便說一句，你不應該爲相同的屬性使用這麼多的類。你應該有box_bigger，box_smaller而不是box1_bigger，box2_bigger，box1_smaller box2_smaller它不是正確的方式 – Saar
薩爾謝謝你的回覆。你會如何推薦設置openBox類。你能舉個例子嗎？預先感謝您的幫助。 – irina19