если открыть деталь, то скрыть ввод или, если закрыть деталь, показать ввод - PullRequest
1 голос
/ 09 мая 2020

Я хочу сделать ввод и деталь, но если вы откроете деталь, она скроет ввод, если он открыт. Я пошел искать и нашел это https://i.stack.imgur.com/6Mh8d.png, но когда я положил его на свой, он не работал. Вот код:

, но здесь я помещаю его сюда, работаю и вставляю обратно, но он не работает? Не беспокойтесь о css. http://jsfiddle.net/34vrmhuw/1/

это код, который заставит его исчезнуть

<script>// 
  jQuery(document).ready(function() {
  jQuery('#hideshow').live('click', function(event) {
    jQuery('#content').toggle('show');
  });
});
</script>

это html:

<div>
    <label>Social Security#</label>
    <input id="content" name="SSN" type="text" size="42" maxlength="42" />
    <var>Auto Hide</var>
</div>
<div>
    <details>
        <summary id="hideshow">
            If you don't have U.S. Social Security number pleases
            <b style="color: blue;">CLICK HERE</b>
        </summary>
        <fieldset>
            <h2 style="border-bottom: double #000;">Identification Confirm</h2>
            <span>
                <del>
                    <h3 style="background-color: #ccc;">Passport ID Number</h3>
                    <input type="text" name="PassPort_ID" placeholder="Passport ID Number" />
                </del>
                <del>
                    <h3 style="background-color: #ccc;">Identification Number</h3>
                    <input type="text" name="Identification_Number" placeholder="Identification Number" />
                </del>
                <del>
                    <h3 style="background-color: #ccc;">Driver Licence Number</h3>
                    <input type="text" name="Driver_Licence_Number" placeholder="Driver Licence Number" />
                </del>
            </span>
            <span>
                <del>
                    <h3 style="background-color: #ccc;">Passport Image</h3>
                    <style type="text/css">
                        .PassPort-Image > #PassPort_Image {
                            display: none;
                        }
                    </style>
                    <div class="PassPort-Image">
                        <label style="width: 200px; height: 200px;" for="PassPort_Image">
                            <img
                                id="PassPort_Input"
                                src="img-BG/Browse-FrontImage+.png"
                                style="
                                    width: 150px;
                                    height: 150px;
                                    float: left;
                                    display: block;
                                    line-height: 200px;
                                    text-align: center;
                                    border: 1px solid black;
                                    margin: 0px 0px 10px 0px;
                                    padding: 0px 0px 0px 0px;
                                    border-radius: 0px 0px 0px 0px;
                                "
                            />
                        </label>
                        <input id="PassPort_Image" type="file" name="Img_Passport" />
                    </div>
                </del>
                <del>
                    <h3 style="background-color: #ccc;">ID/DL Image</h3>
                    <style type="text/css">
                        .PassPort-Image > #ID_Image {
                            display: none;
                        }
                    </style>
                    <div class="PassPort-Image">
                        <label style="width: 200px; height: 200px;" for="ID_Image">
                            <img
                                id="ID_Input"
                                src="img-BG/Browse-FrontImage+.png"
                                style="
                                    width: 150px;
                                    height: 150px;
                                    float: left;
                                    display: block;
                                    line-height: 200px;
                                    text-align: center;
                                    border: 1px solid black;
                                    margin: 0px 0px 10px 0px;
                                    padding: 0px 0px 0px 0px;
                                    border-radius: 0px 0px 0px 0px;
                                "
                            />
                        </label>
                        <input id="ID_Image" type="file" name="Img_ID" />
                    </div>
                </del>
                <del>
                    <h3 style="background-color: #ccc;">Face Image</h3>

                    <div class="PassPort-Image">
                        <label style="width: 200px; height: 200px;" for="Face_Image">
                            <img
                                id="Face_Input"
                                src="img-BG/Browse-FrontImage+.png"
                                style="
                                    width: 150px;
                                    height: 150px;
                                    float: left;
                                    display: block;
                                    line-height: 200px;
                                    text-align: center;
                                    border: 1px solid black;
                                    margin: 0px 0px 10px 0px;
                                    padding: 0px 0px 0px 0px;
                                    border-radius: 0px 0px 0px 0px;
                                "
                            />
                        </label>
                        <input id="Face_Image" type="file" name="Img_Face" />
                    </div>
                </del>
            </span>
            <span>
                <div class="box-infoes">
                    <div style="color: red; display: none;" class="error">This Is a Wrong passportcode !</div>
                </div>
            </span>
        </fieldset>
    </details>
</div>

1 Ответ

1 голос
/ 09 мая 2020

Фрагмент, у вас есть ошибки в методе .live(), который был объявлен устаревшим как go (поскольку, я думаю, v 1.7), если вы используете новую версию jQuery, замените его на .on() метод, вот рабочий сниппет:

jQuery(document).ready(function() {
  jQuery('#hideshow').on('click', function(event) {
    jQuery('#content').toggle('show');
  });
});
<div>
  <label>Social Security#</label>
  <input
    id='content'
          name="SSN"
          type="text"
          size="42"
          maxlength="42" />
  <var>Auto Hide</var>
</div>
<div>
  <details>
          <summary id='hideshow'>
              If you don't have U.S. Social Security number pleases
              <b style="color:blue">CLICK HERE</b>
          </summary>
          <fieldset>
          <h2 style="border-bottom:double #000">Identification Confirm</h2>
              <span>
                  <del>
                      <h3 style="background-color:#CCC">Passport ID Number</h3>
          <input type="text" name="PassPort_ID" placeholder="Passport ID Number" />
                  </del>
                  <del>
                      <h3 style="background-color:#CCC">Identification Number</h3>
          <input type="text" name="Identification_Number" placeholder="Identification Number" />
                  </del>
                  <del>
                      <h3 style="background-color:#CCC">Driver Licence Number</h3>
          <input type="text" name="Driver_Licence_Number" placeholder="Driver Licence Number" />
                  </del>
              </span>
              <span>
                  <del>
                      <h3 style="background-color:#CCC">Passport Image</h3>
          <style type="text/css">
              .PassPort-Image>#PassPort_Image {
                    display: none;
                  }

          </style>
          <div class="PassPort-Image">
            <label  style="width: 200px; height: 200px;" for="PassPort_Image">
              <img  id="PassPort_Input"
                    src="img-BG/Browse-FrontImage+.png"
                    style="  width: 150px;
                            height: 150px;
                            float: left;
                            display: block;
                            line-height: 200px;
                            text-align: center;
                            border: 1px solid black;
                            margin: 0px 0px 10px 0px;
                            padding: 0px 0px 0px 0px;
                            border-radius: 0px 0px 0px 0px;"/>
            </label>
             <input id="PassPort_Image" type="file" name="Img_Passport" />
          </div>

                  </del>
                  <del>
                      <h3 style="background-color:#CCC">ID/DL Image</h3>
          <style type="text/css">
              .PassPort-Image>#ID_Image {
                    display: none;
                  }

          </style>
          <div class="PassPort-Image">
            <label  style="width: 200px; height: 200px;" for="ID_Image">
              <img  id="ID_Input"
                    src="img-BG/Browse-FrontImage+.png"
                    style="  width: 150px;
                            height: 150px;
                            float: left;
                            display: block;
                            line-height: 200px;
                            text-align: center;
                            border: 1px solid black;
                            margin: 0px 0px 10px 0px;
                            padding: 0px 0px 0px 0px;
                            border-radius: 0px 0px 0px 0px;"/>
            </label>
             <input id="ID_Image" type="file" name="Img_ID" />
          </div>


                  </del>
                  <del>
                      <h3 style="background-color:#CCC">Face Image</h3>

          <div class="PassPort-Image">
            <label  style="width: 200px; height: 200px;" for="Face_Image">
              <img  id="Face_Input"
                    src="img-BG/Browse-FrontImage+.png"
                    style="  width: 150px;
                            height: 150px;
                            float: left;
                            display: block;
                            line-height: 200px;
                            text-align: center;
                            border: 1px solid black;
                            margin: 0px 0px 10px 0px;
                            padding: 0px 0px 0px 0px;
                            border-radius: 0px 0px 0px 0px;"/>
            </label>
             <input id="Face_Image" type="file" name="Img_Face" />
          </div>
                  </del>
              </span>
      <span>
          <div class="box-infoes">
            <div style="color:red; display:none;" class="error"> This Is a Wrong passportcode !</div>
          </div>
      </span>
          </fieldset>
  </details>
  </div>
  
  <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...