0

<div>JavaScript / DOMプロパティを使用して、の表示/非表示機能が必要です。

onclick()2つのボタンshowとhide、それぞれが独自のボタンを持つJavaScriptを使用すると、<div>次のように機能します。

  • デフォルトでは、showボタンは非表示になり、メイン<div>ボタンと非表示ボタンが表示されます。ボタンをクリックするとhide、メインボタン<div>と「非表示」ボタン自体が非表示になり、showボタンが表示されます。
  • ボタンをクリックするとshowメイン<div>が表示され、「表示」ボタンをクリックするとボタンが表示されます。これは、のhideようなものを使用して実現できると思いますdocument.getElementById(DIVid).style.visibility="hidden"。

しかし、どうすればこれを行うことができますか？

4

4 に答える 4

3 
$('#hidebutton').click(function() {
   $('#DIVid, #showbutton').show();
   $(this).hide();
});

$('#showbutton').click(function() {
   $('#DIVid, #hidebutton').show();
   $(this).hide();
});

または、必要に応じて：

$('#hidebutton, #showbutton').click(function() {
    var show = $(this).is('#showbutton');
    $('#DIVid, #hidebutton').toggle(show);
    $('#showbutton').toggle(!show);
});
于 2012-08-10T09:43:32.187 に答える
1

それぞれにクラスを定義し、その<div>jQuery関数を作成します。これはサンプルコードです：

<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

Jquery code

$(".a").click(function(e){
your code goes here
}
于 2012-08-10T09:51:41.530 に答える
0

これを確認してください:デモを見る

$("#btnclk").click(function() {
    if ($('.test').is(':visible')) {
        $(".test").hide();
    } else {
        $(".test").show();
    }
});

<div class="test">
  Div1
</div>
<div class="test">
  Div1
</div>

<input type="button" id="btnclk" value="Show/Hide">

または、JavaScript で実行する場合は、getElementsByClassName代わりに を使用しますgetElementById。

于 2012-08-10T09:52:40.027 に答える
0

jsBin デモ

シンプルなjQuery:

$('.show_hide').click(function(){
  $(this).text( $(this).text()==='HIDE'?'SHOW':'HIDE' );
  $(this).next('.box_content').stop().slideToggle();
});

HTML:

  <div class="box">
    <h2>Title 1</h2><button class="show_hide">HIDE</button>
    <div class="box_content">
      <p>
        1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus tortor at nisl dictum lobortis. Mauris dolor augue, porttitor non cursus et, hendrerit sed mi. Morbi sollicitudin sodales dui, et interdum justo condimentum vel.
      </p>
      
    </div>
  </div>

CSS:

.box{
  position:relative;
  padding:15px;
  background:#eee;
  margin:10px;
}
.box h2{
  margin:0px;
  padding:5px;
}
.show_hide{
  position:absolute;
  right:15px;
  top:20px;
  cursor:pointer;
}
于 2012-08-10T10:08:28.343 に答える