如何在jQuery中顯示當前元素？

Question

我有這樣的例子：

link

代碼HTML：

<div class="clasa-comuna"> 
    <div class="declansare"> 
    <span class="plus">+</span> 
    <span class="minus">-</span> 
    </div> 
    <div class="arata"></div> 
</div> 
<div class="clasa-comuna"> 
    <div class="declansare"> 
    <span class="plus">+</span> 
    <span class="minus">-</span> 
    </div> 
    <div class="arata"></div> 
</div> 
<div class="clasa-comuna"> 
    <div class="declansare"> 
    <span class="plus">+</span> 
    <span class="minus">-</span> 
    </div> 
    <div class="arata"></div> 
</div> 

CODE CSS：

.declansare{ 
    background:red; 
    width:100px; 
    height:50px; 
} 
.arata{ 
    width:100px; 
    height:100px; 
    background:blue; 
    display:none; 
} 
.clasa-comuna{ 
    display:inline-block; 
    margin-left:10px; 
} 
.minus{ 
    display:none; 
    color:white; 
} 
.plus{ 
    color:white; 
} 

CODE JS：

我想要做的是顯示div "arata"這是當前元素。

我試過類似'但它顯示所有的divs。

$(".arata").toggle(); 

我該如何解決這個問題？

我希望我能夠讓自己明白...如果你需要更多的解釋可用。

在此先感謝！

編輯：

回來一個問題，我設法使它工作 但如何只做一個保持開放？

new link

CODE JS：

$(".plus").on("click", function() { 
    $(this).hide(); 
    $(this).closest('.clasa-comuna').find('.arata').show(); 
    $(this).next().show(); 
}); 

我想要做的只是保持在當前打開的，無法打開多個...

EDIT 2 ：

new link 3

我接近尾聲......只有一個問題。 它之前保持其它大衆減號......不允許超過零下存在......在開放

CODE JS：

$(".plus").on("click", function() { 
    $(this).hide(); 
    $('.arata').hide(); 
    //$('.arata').hide(); 
    $(this).closest('.clasa-comuna').find('.arata').show(); 
    $(this).next().show(); 
}); 

$(".minus").on("click", function() { 


}); 

Answer 1

更改密碼JS這樣

$（ 「再加上」）。在（ 「點擊」，函數（）{。 '磯'。 $（本）.parent（）找到（）顯示（）;

}）;

你必須把「。「提前arata，如果arata是div類的話，如果arata是id，那麼放'''

Answer 2

你有一個與所用選擇相關的語法問題，你需要找到相對於當前元素的元素

另一種簡單的方法是使用一個類來設置像下面的JQuery

$(".plus, .minus").on("click", function() { 
 
    var $comuna = $(this).closest('.clasa-comuna').toggleClass('open', $(this).hasClass('plus')); 
 
    $('.clasa-comuna.open').not($comuna).removeClass('open'); 
 
});

.declansare { 
 
    background: red; 
 
    width: 100px; 
 
    height: 50px; 
 
} 
 
.arata { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
    display: none; 
 
} 
 
.clasa-comuna { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
} 
 
.clasa-comuna .minus { 
 
    display: none; 
 
    color: white; 
 
} 
 
.clasa-comuna .plus { 
 
    color: white; 
 
} 
 
.clasa-comuna.open .minus { 
 
    display: inline; 
 
} 
 
.clasa-comuna.open .plus { 
 
    display: none; 
 
} 
 
.clasa-comuna.open .arata { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clasa-comuna"> 
 
    <div class="declansare"> 
 
    <span class="plus">+</span> 
 
    <span class="minus">-</span> 
 
    </div> 
 
    <div class="arata"></div> 
 
</div> 
 
<div class="clasa-comuna"> 
 
    <div class="declansare"> 
 
    <span class="plus">+</span> 
 
    <span class="minus">-</span> 
 
    </div> 
 
    <div class="arata"></div> 
 
</div> 
 
<div class="clasa-comuna"> 
 
    <div class="declansare"> 
 
    <span class="plus">+</span> 
 
    <span class="minus">-</span> 
 
    </div> 
 
    <div class="arata"></div> 
 
</div>

Answer 3

使用可視性將使唯一一個已打開。

$(".plus").on("click", function() { 
    $('.arata').hide(); 
    $(this).closest('.clasa-comuna').find('.arata').show(); 
}); 

隱藏其他所有打開的div之前。

Working Fiddle

編輯：

按照您的要求在這裏我編輯我的答案。

$(".plus").on("click", function() { 

    $('.arata').hide(); 
    $('.minus').hide(); 
    $('.plus').show(); 
    $(this).hide(); 
    $(this).closest('.clasa-comuna').find('.arata').show(); 
    $(this).next().show(); 
}); 

Updated Fiddle