在Javascript中添加和刪除類

Question

我試圖讓它工作，但無法弄清楚。 已經搜索的主題，但要麼我不明白他們或它沒有問。可能是兩個！ ：P

我只是試圖讓包裝彈出來，當你點擊「clickme」的時候，如果它彈出，它應該保持並顯示其他內容。 而如果 「clickme」 的得到了兩次點擊它應該關閉的一個...

HTML

<a id="nav1">Clickme</a> 
<a id="nav2">Clickme</a> 
<div id="navwrapper"> 
    <h1 id="dropdown1">Menu1</h1> 
    <h1 id="dropdown2">Menu2</h1> 
</div> 

的Javascript

document.getElementById("nav1").onclick=function(){ 
    var dropdown1 = document.getElementById('dropdown1'); 
    var dropdown2 = document.getElementById('dropdown2'); 
    var navwrapper = document.getElementById('navwrapper'); 
    if (dropdown1('not(.selected)') && navwrapper('not(.selected)')) { 
     dropdown1.addClass('unselected'); 
     navwrapper.addClass('unselected'); 
    }else{ 
     dropdown1.addClass('selected'); 
     navwrapper.addClass('selected'); 
     dropdown2.addClass('unselected'); 
    } 
}; 
document.getElementById("nav2").onclick=function(){ 
    var dropdown1 = document.getElementById('dropdown1'); 
    var dropdown2 = document.getElementById('dropdown2'); 
    var navwrapper = document.getElementById('navwrapper'); 
    if (dropdown2('not(.selected)') && navwrapper('not(.selected)')) { 
     dropdown2.addClass('unselected'); 
     navwrapper.addClass('unselected'); 
    }else{ 
     dropdown2.addClass('selected'); 
     navwrapper.addClass('selected'); 
     dropdown1.addClass('unselected'); 
    } 
}; 

CSS

#navwrapper.selected { 
    display:block; 
} 
#navwrapper.unselected { 
    display:none; 
} 
#navwrapper { 
    background-color:#ff0000; 
    transition: all 500ms ease; 
} 
#dropdown1, #dropdown2 { 
    transition: all 500ms ease; 
} 
#dropdown1.selected, #dropdown2.selected { 
    display:block; 
} 
#dropdown1.unselected, #dropdown2.unselected { 
    display:none; 
} 

Answer 1

這是你想要它如何工作？如果是，我只是將腳本更改爲僅使用jQuery。 JSFiddle

試試這個代碼：

的Javascript：

$("#nav1").click(function() { 
    var dropdown1 = $("#dropdown1"); 
    var dropdown2 = $("#dropdown2"); 
    var navwrapper = $("#navwrapper"); 
    if (dropdown1.hasClass("selected") && navwrapper.hasClass("selected")) { 
     dropdown1.removeClass('selected'); 
     dropdown1.addClass('unselected'); 
     navwrapper.removeClass('selected'); 
     navwrapper.addClass('unselected'); 
    }else{ 
     dropdown1.removeClass('unselected'); 
     dropdown1.addClass('selected'); 
     navwrapper.removeClass('unselected'); 
     navwrapper.addClass('selected'); 
     dropdown2.removeClass('selected'); 
     dropdown2.addClass('unselected'); 
    } 
}); 
$("#nav2").click(function() { 
    var dropdown1 = $("#dropdown1"); 
    var dropdown2 = $("#dropdown2"); 
    var navwrapper = $("#navwrapper"); 
    if (dropdown2.hasClass("selected") && navwrapper.hasClass("selected")) { 
     dropdown2.removeClass('selected'); 
     dropdown2.addClass('unselected'); 
     navwrapper.removeClass('selected'); 
     navwrapper.addClass('unselected'); 
    }else{ 
     dropdown2.removeClass('unselected'); 
     dropdown2.addClass('selected'); 
     navwrapper.removeClass('unselected'); 
     navwrapper.addClass('selected'); 
     dropdown1.removeClass('selected'); 
     dropdown1.addClass('unselected'); 
    } 
}); 

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<a id="nav1">Clickme</a> 
<a id="nav2">Clickme</a> 
<div id="navwrapper" class="selected"> 
<h1 id="dropdown1" class="selected">Menu1</h1> 
<h1 id="dropdown2" class="unselected">Menu2</h1> 
</div> 

Answer 2

你可以使用的標準className屬性更改任何元素的類名稱。但是，這會獲取/設置完整的類名，引號之間的所有內容。例如

<a id="one" class="hello world"> 

的JavaScript：

var one = document.getElementById('one'); 
one.className = 'new world'; 

現在的HTML看起來像：

<a id="one" class="hello world"> 

要在元素上添加或刪除個人類可以使用classList接口。

one.classList.remove('hello'); 
one.classList.add('new'); 

參考：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

注意classList是沒有得到普遍支持。如果你需要支持Internet Explorer 9，這不是好事。在這種情況下，您需要創建自己的addClass和removeClass函數，或者使用像jQuery這樣的庫來提供它們。

function addClass(el, name) { 
    var regexp = new RegExp('(^|)' + name + '(|$)'); 
    if (!regexp.test(el.className)) { 
     el.className += ' ' + name; 
    } 
    el.className = el.className.trim(); 
}; 

function removeClass(el, name) { 
    var regexp = new RegExp('(^|)' + name + '(|$)'); 
    el.className = el.className.replace(regexp, '$1'); 
    el.className = el.className.trim(); 
}; 

用法：

removeClass(one, 'hello'); 
addClass(one, 'new'); 

一般情況下，要小心使用本地JavaScript/ECMAScript的API的混合jQuery的API。這就是你原來的代碼中發生的事情。您正在將jQuery方法應用於標準JS HTMLElement實例。這是一個很混亂的來源！

Answer 3

我不是100％肯定要完成的任務，但我的猜測是你想要2個下拉選項裏面的選項？

我的建議是使用Bootstrap（http://getbootstrap.com/）這是一個非常棒的工具，它使用Javascript和Jquery來完成這個任務，並且更像是resposive網站和應用程序，更快的反應和可搜索/可排序的表格。

這種情況的的jsfiddle是：

https://jsfiddle.net/wh64mLhu/

進行分解：

步驟1

添加引導CSS在你的頭，像這樣：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 

步驟2

對身體的底部添加的JavaScript像這樣

<html> 
     <head> 
      <!-- Header Code + CSS Here --> 
     </head> 
    <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    </body> 
</html> 

步驟3

創建HTML機身碼無論你想有，例如我上面分享的JSFiddle。 這包含2個下拉列表。

首先你創建一個<div>來表明你要在你的頁面中創建一個新的「部門」。 如果您想要使用<span>的圖像，則可以添加<Button>。 完成此操作後，您使用<ul>創建列表，並在其中創建所有元素<li>。

我希望這有助於和convinsed您使用引導:)