jscolorクラスをブートストラップnavbarに追加する

Question

boootstrap navbarをこのボタンのようにjscolorで動作させようとしています。ここで

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> 
 
<button 
 
    class="jscolor {valueElement:null,value:'333'}" 
 
    style="border:1px solid black"> 
 
    Color 
 
</button>

私はjscolorに接続しようとしていますナビバーです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> 
 
<script src="jscolor.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top jscolor {valueElement:null,value:'333'}">

Answer 1

ナビゲーションバーは、カラーピッカーを重複しないように、これが役立つことを願って、z-indexが必要とされています。

var nav = document.getElementById("navbar"); 
 
var navColor = document.getElementById("nav-color"); 
 

 
nav.addEventListener("click", function(){ 
 
\t navColor.jscolor.show(); 
 
});

#navbar { 
 
    z-index: 0; 
 
    cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> 
 

 
<input id="nav-color" class="jscolor {styleElement:'navbar',value:'333'}" type="hidden"> 
 
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top "> 
 
</nav>

Answer 2

あなたは色

を変更するためのボタンを追加することができます

a fiddle

function update(jscolor) { 
document.getElementById('navbar').style.backgroundColor = '#' + jscolor 
}