0

私はJqueryの初心者です。Web サイトでフローティング メニューを作成したいと考えています。id="item" である div を作成しました

以下のコードは私の.phpファイルにもあり、id = 'sidebarOpenfile'であるボタンを押した後にアイテムをアクティブにしたいです。

<div id="item" style="float:left">
<?php include("leftmenu.php"); ?>
</div>

私の「sidebarOpenFile」コードはここにあります

  <button id="sidebarOpenfile" class="toolbarButton" title="Toggle OpenFile" tabindex="5" data-l10n-id="toggle_sidebar_openfile">
              <span data-l10n-id="toggle_openfile_label">Toggle OpenFile</span>
            </button>

また、私の .php ファイルには、viewer.js ファイルと .css ファイルがあります。

私は.jsファイルにこのコードを書きました

document.getElementById('sidebarOpenfile').addEventListener('click',function() {
    alert("Its working"); // For sure whether event is working or not working,
 This code works and gets alert

$("#item").css('visibility','visible');
});

また、このコードを.cssファイルに書きました

#item {
    position:absolute;
    top: 10px;
    width: 200px;
    bottom: 0px;
    background:orange;
    left:0px;
    visibility:hidden;
}

通常、ボタンを押した後、アイテムのcssの可視性を非表示から可視に変更します。しかし、それは機能していないようで、効果がありません。

助けていただければ幸いです。

4

5 に答える 5

2

クリックで可視性を切り替えるには、可能な限り簡単です。純粋な JavaScript は必要ありません。(非常に) 小さな jQuery だけです。

<script>
  $('#sidebarOpenFile').click(function() {
  $('#item').toggle(); });
</script>

toggle() 関数は、照会された の表示状態を切り替えます#item。

非表示または表示するには、次を使用できます。

 $('#sidebarOpenFile').click(function() {
   $('#item').show(); // or $('this').hide()
}

慣習のために、次のような自己呼び出しの匿名関数でラップする必要があります。

(function(){
  $('#sidebarOpenFile').click(function() {
  $('#item').toggle(); });
})();
于 2013-07-26T23:20:21.233 に答える