Javascriptで簡単なナビゲーションを切り替える

非常に簡単なナビゲーションメニューを持ちたいと思います。クリック可能でなければなりません。このコードJavascriptで簡単なナビゲーションを切り替える

var isActive = true; 
 

 
function toggleMenu(){ 
 
    var content = $("#navContent"); 
 

 
    isActive = !isActive; // toggle the current menu state 
 
    if(isActive) { 
 
     content.display = "block"; // show the items 
 
    } else { 
 
     content.display = "none"; // hide all items 
 
     content.position = "absolute"; 
 
     content.zIndex = 1; 
 
    } 
 
}

#navContainer { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#navContent button { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body onLoad="toggleMenu()"> 
 

 
<div id="navContainer"> 
 
    <button id="navBtn" onclick="toggleMenu()">Menu</button> 
 
    <div id="navContent"> 
 
     <button>1</button> 
 
     <button>2</button> 
 
     <button>3</button> 
 
     <button>4</button> 
 
    </div> 
 
</div> 
 

 
</body>

を使用して、メニューボタンを押すときに、私はtoggleMenu()機能に入るが、項目は非表示にしないでください。

誰かが私を助けることができますか？

出典

2017-08-14 peterHasemann

発射される機能ですか？ –

'$（"＃navContent "）'はjQueryオブジェクトを返しますが、.styleに直接アクセスするにはDOM要素への参照が必要です。しかし、jQueryには要素スタイルを操作するメソッドがあるため、最初にこれら2つのアプローチを混在させる必要はありません。 .show/.hideもあります（これは、これを行うには理想的な方法ではありませんが、クラスを切り替えて、スタイルシートに書式設定を残しておかなければなりません）。 – CBroe

'toggle （） 'を使用し、表示をcssで非表示にしてページのレンダリング時にメニューを非表示にしますが、使用しているメソッドを続行したい場合は、' css'をターゲットにしてから ' CSSプロパティ。 **例：** 'content.css（" display "、" block "）;' – NewToJS

あなたのコードは、プレーンなJSとjQueryを組み合わせたものです。どちらか一方を使うことをお勧めします。

$(function() { 
 
    $('#navBtn').click(function() { 
 
    $('#navContent').toggle(); 
 
    }); 
 
});

#navContainer { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#navContent button { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="navContainer"> 
 
    <button id="navBtn">Menu</button> 
 
    <div id="navContent"> 
 
    <button>1</button> 
 
    <button>2</button> 
 
    <button>3</button> 
 
    <button>4</button> 
 
    </div> 
 
</div>

出典

2017-08-14 12:10:07

ああ、 'element.toggle（）'はコードを非常にきれいに保ちます:) – peterHasemann

その後、JSでトグルされる要素を、隠蔽するCSSクラスを作るためにはるかに簡単になります：ここではjQueryを使用してコードの簡易版です。この答えはjQueryの

function toggleMenu(){ 
 
    document.getElementById('navContent').classList.toggle("hidden") 
 
}

#navContainer { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#navContent button { 
 
    display: block; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<div id="navContainer"> 
 
    <button id="navBtn" onclick="toggleMenu()">Menu</button> 
 
    <div id="navContent" class="hidden"> 
 
     <button>1</button> 
 
     <button>2</button> 
 
     <button>3</button> 
 
     <button>4</button> 
 
    </div> 
 
</div>

出典

2017-08-14 12:11:14 Vilsol

を必要としないのはなぜそれを簡素化ではない：

$("#navBtn").click(function() { 
 
    $("#navContent").toggle(); 
 
});

#navContainer { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#navContent { 
 
    display: none; 
 
} 
 

 
#navContent button { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
    <div id="navContainer"> 
 
    <button id="navBtn">Menu</button> 
 
    <div id="navContent"> 
 
     <button>1</button> 
 
     <button>2</button> 
 
     <button>3</button> 
 
     <button>4</button> 
 
    </div> 
 
    </div> 
 

 
</body>

出典

2017-08-14 12:15:20 DCdaz

Javascriptで簡単なナビゲーションを切り替える

答えて

関連する問題