php - ボックスをクリックしながら非表示にする

Question

私はこれで本当に初心者だと言いますが、何かを学ぼうとしているので、この事実に固執しています。

技術的には、この「ホームボックス」をクリックしても非表示にできません。このボックスの「クリック」機能はギャラリーを開くことになっています...しかし、それを開いた後、それも非表示にする必要があります。なんで？ボックスには実際には低いz-indexの画像が含まれており、ギャラリーには高いz-indexの画像が含まれているため、2つの画像が表示されているだけで、見るのは非常に悪いです。

<div id="homebox">
             <a href="img/gallery/Home/Harris-Wharf-London-man-01.jpg" rel="gallery" class="pirobox_gall16">
                         <img src="../400x550 man.png" border="0"/>
          </a>
            <?PHP
                $sql_foto = "SELECT * FROM foto WHERE idMenu = '16' ORDER BY nomeFile ASC";
                $query_foto = mysql_query($sql_foto);
                while($fetch_foto = mysql_fetch_array($query_foto))
                {
                    $foto = $fetch_foto['nomeFile']; 

                    ?>
                    <a href="img/gallery/ID16/<?PHP echo $foto;?>" rel="gallery" class="pirobox_gall16">
                    </a>
                <?PHP
                    }

            ?>
        </div>

これを作成するためにこのスクリプトを試していますが、私が言ったように、古典的なhtmlサイトよりもクールなものを作成することを学ぼうとしていますが、質問することは常にあなたの能力を向上させる良い方法だと思います。

$('#homebox').click(function() {
  $('#homebox').css('visibility', 'visible') 
});

建設的な返信を事前に感謝します！

Answer 1

クラスを追加するhiddenことも良い習慣です。このようにして DOM を参照すると、要素の状態を簡単に確認できます。

$('#homebox').click(function() {
    $(this).toggleClass('hidden');
});

そしてあなたのCSSで：

.hidden { display: none; visibility: hidden; }

Answer 2

画像ギャラリーに個別のコントロールを用意してみてください。要素自体を使用して要素の可視性または表示を切り替えることはできません。クリック イベントが発生するか発生しなくなり、visibility: hidden;ドキュメントフローにも表示されなくなります (ただし、DOM には残ります)。display:none;display: none

私の提案は、次のようなギャラリートリガー要素を追加することです

<a href="#" id="gallery-trigger">View Gallery</a>

次に、この要素にクリック イベントを追加して、ギャラリーの表示を切り替えることができます。

document.ready(function() {
     $('#gallery-trigger').click(function() {
         $('.homebox').toggle();
     });
});

http://jsfiddle.net/3leven11/h6YtJ/

Answer 3

このコードを試してください...

$('#homebox').click(function() {
  $(this).hide();
});

また

$('#homebox').click(function() {
      $(this).SlideUp();
    });

Answer 4

以下のコードを使用してください

  $('#homebox').click(function() {
      $(this).hide(); 
    });

Answer 5

試す

$('#homebox').click(function() {
  $('#homebox').css("display", "none");
});