2016-11-21 5 views
-1

パネル本体が空であれば非表示にしたいここでパネル本体を非表示にする方法は空ですか?

は例です:BootPly

コードのJavascript:

$(function() { 
    $('#container').load(function() { 
     if($.trim($(this).contents().find("container").find('panel-body').length) == 0) { 
      $(this).hide(); 
     } 
    }); 

コードHTML:このような何かについて

<div class="container"> 
    <div class="row clearfix"> 
     <div class="col-md-9 column"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading">Content</div> 
       <div class="panel-body fixed-panel"> 
        <div class="form-group"> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
+0

あなたのコードを実行するために 'load'イベントがトリガされ、' .find() 'セレクタがクラス名の前に' .'がないように見えるようにする必要があります。 –

答えて

0

どのように? http://www.bootply.com/bKb0isdzKA

$(function() { 
    $('.form-group').each(function() { 
     if ($(this).is(':empty')) { 
      $(this).closest('.container').hide(); 
     } 
    }); 
}); 

あなたはいくつかの問題がありました。 1つは、containerクラスであるにもかかわらず、セレクタとして#containerを使用していました。さらに、body-panelが空であるかどうかを確認していましたが、子divが含まれていたため、常にHTMLコンテンツが含まれていました。

上記のコードは、それぞれ.form-groupをループし、親コンテナが空の場合は非表示にします。

これがあなたの心にあったものではない場合は、教えてください。私は調整を加えることができます。

+0

'show/hide'を使って' hidden 'クラスをトグルすることをお勧めします。それはずっと速く、私の意見ではブートストラップのために便利に動く。 –

+0

こんにちはサンティ、動作していない、リンクを確認してください:http://www.bootply.com/3IZnJQlOqu –

+0

私はテストする画像を入れて、隠れ続ける... –

関連する問題