主页 / 问题 / 995040
Accepted
recile
Asked:2020-06-21 15:26:04 +0000 UTC2020-06-21 15:26:04 +0000 UTC

如何在点击时隐藏一个块然后打开它？

  • 772

<div class="col-sm-8">
              <div class="upload-button">
                  <input class="btn btn-primary" type="button" value="Новая вакансия +" onclick="document.getElementById('addResume').className == '' ? 'hidden' : ''">
              </div>
              <div class="" id="addResume" >
              <!-- ----------------- -->
              <div class="form-group">
                <input type="text" class="form-control input-lg" placeholder="Название вакансии">
              </div>
              <div class="form-group col-xs-12">
                <h6 >Требуемый опыт</h6>
                <div class="checkall-group"  >

                  <div class="checkbox " > 
                    <input type="checkbox" id="rate1" name="rate" >
                    <label for="rate1" >Не имеет значения</label>
                  </div>
  
                  <div class="checkbox " >
                    <input type="checkbox" id="rate2" name="rate">
                    <label for="rate2">Без опыта </label>
                  </div>
  
                </div>
              </div>
              <div class="upload-button">
                <input class="btn btn-primary" type="button" value="Создать и опубликовать">
              </div>
                  <br><br>
            </div>
          </div>

javascript

2 个回答

  1. Best Answer

    function myFunction() {
   var element = document.getElementById("card");
   element.classList.toggle("d-none");
}
    .d-none {
  display:none
}
    <button onclick="myFunction();">Test</button>
<div id="card" class="d-none">
  <p>asdsa</p>
  <p>asdsa</p>
  <p>asdsa</p>
  <p>asdsa</p>
  <p>asdsa</p>
</div>

    • 2 

  2. .hidden {
  display: none;
}
    <div class="col-sm-8">
              <div class="upload-button">
                  <input class="btn btn-primary" type="button" value="Новая вакансия +" onclick="document.getElementById('addResume').className = document.getElementById('addResume').className === '' ? 'hidden' : ''">
              </div>
              <div class="" id="addResume" >
              <!-- ----------------- -->
              <div class="form-group">
                <input type="text" class="form-control input-lg" placeholder="Название вакансии">
              </div>
              <div class="form-group col-xs-12"style="padding: 0;">
                <h6 style="margin-top: 0;margin-bottom: 10px;">Требуемый опыт</h6>
                <div class="checkall-group" style="display: flex;justify-content: space-between;align-items:end" >

                  <div class="checkbox " style="display: inline-block;margin-top:0;padding-top: 0;"> 
                    <input type="checkbox" id="rate1" name="rate" style="margin-top:0;padding-top: 0;">
                    <label for="rate1" style="margin-top:0;padding-top: 0;">Не имеет значения</label>
                  </div>
  
                  <div class="checkbox " style="display: inline-block">
                    <input type="checkbox" id="rate2" name="rate">
                    <label for="rate2">Без опыта </label>
                  </div>
  
                </div>
              </div>
              <div class="upload-button">
                <input class="btn btn-primary" type="button" value="Создать и опубликовать">
              </div>
                  <br><br>
            </div>
          </div>

    • 2

相关问题