Question

您好我有这个移动应用程序。我使用jquery隐藏功能来隐藏一些输入框。好吧，至少那是它应该做的但是我想让它们变得非常小，如果你理解我的代码就在这里就行了你可以看到我在Jsfiddle中的意思我已经包含了提前感谢

$(document).ready(function(){
  $("#facebook").hide();
  $("#twitter").hide();
  $("#google").hide();
  $("#MyName").hide();
  $("#country").hide();

$("#social").click(function(){
  if ($("#social").prop('checked') === true){
    $("#facebook").show();
    $("#twitter").show();
    $("#google").show();
    $("#MyName").show();
    $("#country").show();
  }

  else
  {
    $("#facebook").hide();
    $("#twitter").hide();
    $("#google").hide();
    $("#MyName").hide();
    $("#country").hide();
  }
});

});

http://jsfiddle.net/3Lcchxvv/3/

Answer 1

工作小提琴

<强> http://jsfiddle.net/3Lcchxvv/4/

$(document).ready(function () {

    $("#facebook").hide();
    $("#twitter").hide();
    $("#google").hide();
    $("#MyName").hide();
    $("#country").hide();
    $(".ui-body-inherit").hide();//added

    $("#social").click(function () {
        if ($("#social").prop('checked') === true) {
            $("#facebook").show();
            $("#twitter").show();
            $("#google").show();
            $("#MyName").show();
            $("#country").show();
            $(".ui-body-inherit").show();//added
        } else {
            $("#facebook").hide();
            $("#twitter").hide();
            $("#google").hide();
            $("#MyName").hide();
            $("#country").hide();
            $(".ui-body-inherit").hide();//added
        }
    });

});

Answer 2

你添加的类周围有一个边框，因此不是输入的div仍然显示输入所在的div的边框。

$(document).ready(function () {

$("#facebook").hide();
$("#twitter").hide();
$("#google").hide();
$("#MyName").hide();
$("#country").hide();
$(".ui-input-text, .ui-input-search").hide();

$("#social").click(function () {
    if ($("#social").prop('checked') === true) {
        $("#facebook").show();
        $("#twitter").show();
        $("#google").show();
        $("#MyName").show();
        $("#country").show();
         $(".ui-input-text, .ui-input-search").show();
    } else {
        $("#facebook").hide();
        $("#twitter").hide();
        $("#google").hide();
        $("#MyName").hide();
        $("#country").hide();
        $(".ui-input-text, .ui-input-search").hide();
    }
});

});

JFIDDLE：http://jsfiddle.net/3Lcchxvv/5/

Answer 3

<强> jsFiddle demo

只需在您的所有输入（soc）中添加课程class="soc facebook"即可：

$(function () { // DOM READY

    var $soc = $('.soc').parent('.ui-input-text');
    $soc.hide();

    $("#social").click(function () {
        $soc.toggle( this.checked );
    });

});

Jquery mobile不会隐藏元素

3 个答案: