2

HTML1つのトグル ボタンといくつかのドロップダウン アイテムを含む 1つのページがあります。私のトグルボタンはオンオフのようなものです。
何が必要ですか?? 「オン」をクリックするとドロップダウン項目を非表示にし
、「オフ」をクリックするとドロップダウンを表示する必要があります。私は非常に初心者HTML , CSS, JQueryです。
これは、トグル でのみ機能する HTML ファイルの私のコードです。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" 
type="text/javascript"></script>
<script src="jquery/iphone-style-checkboxes.js" type="text/javascript"
charset="utf-8"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"
charset="utf-8" />
<style type="text/css">
   body {padding: 10px; }
 th {text-align: right;padding: 4px;padding-right: 15px;vertical-align: top; }
.css_sized_container .iPhoneCheckContainer {width: 250px; }
</style>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.on_off :checkbox').iphoneStyle();
  $('.disabled :checkbox').iphoneStyle();
  $('.css_sized_container :checkbox').iphoneStyle({
     resizeContainer: false, resizeHandle: false
  });
  $('.long_tiny :checkbox').iphoneStyle({
     checkedLabel: 'Very Long Text', uncheckedLabel: 'Tiny'
  });

  var onchange_checkbox = ($('.onchange :checkbox')).iphoneStyle({
    onChange: function(elem, value) { 
      $('span#status').html(value.toString());

    }
  });

  setInterval(function() {
    onchange_checkbox.prop(
     'checked', !onchange_checkbox.is(':checked')).iphoneStyle("refresh");
    return
  }, 2500);
});

</script>  
</head>
<body>
  <table><tr class="on_off">
    <td>
      <input type="checkbox" id="on_off" />
    </td>
  </tr></table>
</body>
</html>

非表示と表示のための次の関数の使用を知っています。 

$(document).ready(function(){
   $("#hide").click(function(){
      $("p").hide();
   });
    $("#show").click(function(){
      $("p").show();
   });
});

しかし、この関数が でどのように実装されているかわかりませんjavascript。
上記の機能は2つのボタンで機能し、私は1つのボタンしか使用しないため..
ヒントを教えてください。または、間違っている場所を教えてください....

4

4 に答える 4

2

メソッドを使用できますtoggle：

一致した要素を表示または非表示にします。

$("#button").click(function(){
     $("p").toggle();
});

またはあなたのマークアップに従って：

$("#on_off").change(function(){
     $("p").css('display', this.checked ? 'block' : 'none');
});
于 2012-08-27T07:47:37.087 に答える
1

これを使用できます。

HTML

<p>Hello</p>
<input type="submit" value="submit" id="button">

JSコード

$('#button').on('click', function(){
     $('p').slideToggle();
})

また

$('#button').on('click', function(){
     $('p').toggle();
})
于 2012-08-27T07:49:33.993 に答える
0

通常はただの方法です

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

このリンクにアクセスしてください http://www.w3schools.com/jquery/jquery_hide_show.asp

于 2014-09-04T13:44:08.047 に答える
0

要件に従って、2 つの関数呼び出しを使用する必要がないことを確認してください。両方の機能を実行するトグル メソッドを使用できます。以下のサンプルを参照してください。

$("#button").click(function(){
 $("p").toggle();
});

また、要素を隠しながら効果を与えるには、以下のリンクを参照してください。

Hide in Jquery の効果

于 2013-11-10T18:40:01.870 に答える