JavaScript toggle div

基本上我想切換一個div。這裏是我的html：JavaScript toggle div

 <div id='top-bar'> 
    </div> 
    <div class="toggleButton" >+</div>

我的CSS：

.toggleButton 
{ 
    left: 50%; 
    position: absolute; 
    top: 20%; 
    z-index: 1; 
} 
.toggleButton.expanded{ 
    content: "-"; 
} 
#top-bar 
{ 
    position: absolute; 
    background: linear-gradient(black, #F2F2F2); 
    width:100%; 
    height: 50px; 
    top: 0; 
    left: 0; 
    padding-bottom: 5px; 
}

而且我的JavaScript：

$(document).ready(function() { 
var $content = $("#top-bar").show(); 
$(".toggleButton").on("click", function(e) { 
    $(this).toggleClass("expanded"); 
    $content.slideToggle(); 
}); 
});

我的提琴在這裏：JSFiddle

當我切換，頂部-bar div確實移動了。但切換按鈕的內容不會更改爲「 - 」，也不會向上移動。我想知道如何解決這個問題。

在此先感謝。

來源

2014-06-12 I Was So Lost

您可以檢查觸發類的存在，然後設置它的HTML：

if($(this).hasClass('expanded')) 
$(this).html('+'); 
else 
$(this).html('-');

Working Demo

來源

2014-06-12 01:48:57

但是，當頂部欄被隱藏時，toggleButton不會向上移動。你有什麼想法？ –

@add position：relative;到'toggleButton'並移除頂欄的絕對位置。檢查此：http://jsfiddle.net/Cj69x/ –

但是，如果我刪除絕對位置，toggleButton將被隱藏在頂欄div –

最簡單的方法，使其與CSS content規則的工作，使之成爲:before或:after僞元素。

.toggleButton:before 
{ 
    left: 50%; 
    position: absolute; 
    top: 20%; 
    z-index: 1; 
    content: "+"; 
} 
.toggleButton.expanded:before{ 
    content: "-"; 
}

見這裏：http://jsfiddle.net/KJ3Da/1/

如果你想設置基於topnav項目的位置改變，你需要刪除絕對定位。在這裏看到：http://jsfiddle.net/KJ3Da/2/

來源

2014-06-12 01:49:30 Shomz

但是，當頂部欄被隱藏時，toggleButton不會向上移動。你有什麼想法？ –

是的，只是更新了我的答案。這是因爲絕對的定位，我添加了一個簡單的修復，儘管有很多方法可以做到這一點。 – Shomz

但是，如果我放棄位置屬性，z-index不起作用。所以該div以某種方式隱藏在其他div –

像Shomz說的，如果你要使用內容屬性，你應該總是使用:before或:after僞選擇器。爲了保持切換按鈕的基本風格，您應該將content屬性與其他屬性分開設置。否則，基礎樣式只會影響.toggleButton:before而不會影響.toggleButton.expanded:before。所以，只需將其添加到您的CSS。

.toggleButton:before { 
    content: "+"; 
} 

.toggleButton.expanded:before { 
    content: "-"; 
}

當然，刪除你的HTML和你的CSS樣式聲明.toggleButton.expanded的+。祝你好運！

來源

2014-06-12 16:05:09

JavaScript toggle div

回答

相關問題