2

我有HTML一页带有一个切换按钮和一些下拉项。我的切换按钮就像开关一样。
我需要的？？当我点击“开”时，我需要隐藏下拉项目，当我点击
“关”时，我需要显示下拉项目。我是个新手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。
因为上述功能适用于两个按钮，而我只使用一个按钮..
请给我任何提示或指导我哪里错了？....

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">

代码

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

或者

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

根据您的要求，您不需要使用 2 个函数调用。您可以使用将执行这两个功能的切换方法。请参考以下示例：

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

同样为了在隐藏任何元素时产生效果，请参阅以下链接：

Jquery 中隐藏的效果

于 2013-11-10T18:40:01.870 回答
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 回答