如何顯示郵政絕對股利作爲位置相對股利？

Question

我有一個父div「total」，其中有兩個子div，即「some」和「box」。當我點擊div「some」（child-1）中的鏈接時，必須以寬度：100％顯示「box」（child-2）;如果我點擊其他父鏈接，則必須隱藏當前的「框」（child-2）。此外，點擊按鈕時不能隱藏段落標籤（如位置：相對）。

Here是這個工作的小提琴。

以下行是我試過的代碼。

$('.box').hide(); 
$(".click-btn").on('click', function() { 
    $('.box').hide(); 
    $(this).parent().parent().children(".box").toggle(1000); 
}); 

Answer 1

檢查這一點，如果它解決您的問題jsfiddle

我加入這個

$('.box').hide(); 
$(".click-btn").on('click', function() { 
    $('.box').hide(); 
    $(this).parent().parent().children(".box").toggle(1000); 
}); 

添加CSS

.box { 
    width: 100%; 
    float: left; 
    position: absolute; 
    height: 200px; 
    background: orange; 
    top: 70px; 
    left: 0px; 
    clear: both; 
} 

Answer 2

我的解決辦法是把漂浮的每個.box外.single並用d引用它們ata屬性。

<div class="total"> 
    <div class="single"> 
     <div class="some"><a class="click-btn" href="#" data-box="box1">click</a></div> 
    </div> 

    <div class="clearfix"></div> 

    <div class="box" data-id="box1">Box 1</div> 
</div> 

和箱CSS

.box { 
    width: 100%; 
    height: 200px; 
    background: orange; 
    display:none; 
} 

如果設置在CSS，你不必對DOM準備使用$('.box').hide();顯示器無法比擬的。

由於您在點擊時隱藏所有.box元素，切換功能將不起作用。如果您再次單擊活動鏈接，則可以使用jQuery的.not()函數切換該框，該函數將取出該集合的一個元素。

產品總數的JS會是什麼樣子：

$(".click-btn").on('click', function(e) { 
    e.preventDefault(); 
    var boxId = $(this).data('box'); 
    var activeBox = $('[data-id="'+boxId+'"]'); 
    $('.box').not(activeBox).hide(); 
    activeBox.toggle(1000); 
}); 

我使用e.preventDefault();什麼會阻止瀏覽器默認行動點擊一個鏈接。

這裏是一個小提琴：http://jsfiddle.net/mrvtwpjp/40/