jQuery Mobile不會隱藏元素

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演示

只需將class soc添加到所有輸入中（ class="soc facebook" ），然后執行以下操作：

$(function () { // DOM READY

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

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

});