コンテナdivを非表示にする

#formcontainer divを表示するには、Click Me!をクリックします。？https://jsfiddle.net/v809wxp9/コンテナdivを非表示にする

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    if ($("#formcontainer").hasClass("hassent")) { 
 
     $('#formcontainer').removeClass('hassent'); 
 
     $('#topimage').slideDown(); 
 
     $('#formcontainer').css('height', '0'); 
 
    } else { 
 
     $('#formcontainer').css('height', 'auto'); 
 
    } 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

：

誰かがなぜ

デモを説明することができ、私はそれを非表示にするには、もう一度それをクリックして、それが

:-(非表示にしていません

出典

2016-10-28 michaelmcgurk

あなただけ$('#formcontainer').addClass('hassent'); .Itsが元の位置に戻って取得クラスに追加click.Then else文の時にクラスを削除しています。

jQuery(document).ready(function($) { 
 

 
     // Control Banner toggle on sub pages 
 
     $('#sub-page-banner .tog').click(function(){ 
 
      if ($("#formcontainer").hasClass("hassent")) { 
 
       $('#formcontainer').removeClass('hassent'); 
 
       $('#topimage').slideDown(); 
 
       $('#formcontainer').css('height', '0'); 
 
      }else{ 
 
       $('#formcontainer').addClass('hassent'); 
 
       $('#topimage').slideUp(); 
 
       $('#formcontainer').css('height', 'auto'); 
 
      } 
 
     }); 
 

 
    });

/*SUb Page Banner*/ 
 
    #sub-page-banner{ 
 
     padding:15px; 
 
     background: #3887c2; 
 
     color: #fff; 
 
     cursor: pointer; 
 
     font-size:30px; 
 
     text-transform:uppercase; 
 
     letter-spacing:3px; 
 
    } 
 

 
    #sub-page-banner .tog{ 
 
     margin-top:0px !important; 
 
     width: 100%; 
 
     font-size: 13px !important; 
 
     text-align: center; 
 
    } 
 

 
    #formcontainer{ 
 
     overflow:hidden; 
 
     height:0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
        <div class="container-fluid" id="sub-page-banner"> 
 
         <div class="container"> 
 
          <div class="row"> 
 
           <div class="col-md-3"> 
 
            <div class="btn tog">Click me!</div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 

 
        <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
         <div class="container"> 
 
          <div class="row"> 
 
           <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
            <div id="theform"> 
 
             <div class="row"> 
 
               
 
               <div class="col-md-12"> 
 
                <h1>Hello - Test my form please :-)</h1> 
 
               </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 

 
    </div>

出典

2016-10-28 09:46:40 prasanth

OPのコードは本当に良い答えではありません。彼が間違っていたこと、改善したこと、修正したことについて説明したり、詳しく説明してください。 – Rimble

クラスが見つからない場合、クラスを追加していません。

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    if ($("#formcontainer").hasClass("hassent")) { 
 
     $('#formcontainer').removeClass('hassent'); 
 
     $('#topimage').slideDown(); 
 
     $('#formcontainer').css('height', '0'); 
 
    } else { 
 
     $('#formcontainer').addClass('hassent'); 
 
     $('#formcontainer').css('height', 'auto'); 
 
    } 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

出典

2016-10-28 09:45:56 gurvinder372

だけ$('#formcontainer').addClass('hassent');

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    if ($("#formcontainer").hasClass("hassent")) { 
 
     $('#formcontainer').removeClass('hassent'); 
 
     $('#topimage').slideDown(); 
 
     $('#formcontainer').css('height', '0'); 
 
    } else { 
 
$('#formcontainer').addClass('hassent'); 
 
     $('#formcontainer').css('height', 'auto'); 
 
    } 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

出典

2016-10-28 09:48:54 Bharat

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    if ($("#formcontainer").hasClass("hassent")) { 
 
     $('#formcontainer').removeClass('hassent'); 
 
     $('#topimage').slideDown(); 
 
     $('#formcontainer').css('height', '0'); 
 
    } else { 
 
     $('#formcontainer').addClass('hassent'); 
 
     $('#formcontainer').css('height', 'auto'); 
 
    } 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

をADDDする必要があるコードの下を参照してください。

削除クラスを追加します

出典

2016-10-28 09:48:54 guradio

使用トグル（）関数

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    //if ($("#formcontainer").hasClass("hassent")) { 
 
    // $('#formcontainer').removeClass('hassent'); 
 
    // $('#topimage').slideDown(); 
 
    // $('#formcontainer').css('height', '0'); 
 
    //} else { 
 
    // $('#formcontainer').css('height', 'auto'); 
 
    // } 
 
    $('#formcontainer').toggle(); 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

出典

2016-10-28 09:50:44 Dhaarani

あなたはElse条件で行の次に追加する必要があります。ただ、固定

$("#formcontainer").addClass('hassent');

出典

2016-10-28 09:52:25

コンテナdivを非表示にする

答えて

関連する問題