>source

스팬 클릭에서 div 클래스를 과도하게 보려고합니다.

$(this).closest(".div").find(".list-type-demandes").toggle();

하지만 작동하지 않습니다.

사용하는 경우 :

$(".list-type-demandes").toggle();

작동하지만 두 div가 표시되고 "this"범위에서 div를 표시해야합니다

여기에서 HTML :

<label style="color: #1c5081">
        <span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b>
        </span> Organisation, support et services
      </label>
      <div class="list-type-demandes" style="padding-left: ; display: none">
         <label style="display: inline">
         <input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="54" id="appel_projet_type_demande_list_54"> Architecture d'entreprise
        </label>
      </div>
      <label style="color: #1c5081">
        <span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b></span> Applications
      </label>

      <div class="list-type-demandes" style="padding-left: ; display: none">
        <label style="display: inline">
        <input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="52" id="appel_projet_type_demande_list_52"> Système d'information activités recherche
        </label>
      </div>

여기 스크립트 :

function toogleListTypeDemande(element) {
        $(this).closest(".div").find(".list-type-demandes").toggle();
    }


  • 답변 # 1

    toogleListTypeDemande(element) 를 수정해야합니다  조금만.

    Javascript는 다음 html 요소를 가져 오기 위해nextElementSibling속성을 ​​제공합니다. 불행히도 span 요소에는 다음 형제가 없습니다. 따라서 레이블 인 부모element.parentNode를 얻으려면 한 노드를 다시 이동해야합니다. 거기서부터 다음 형제는 div입니다.

    function toogleListTypeDemande(element) {
            $(element.parentNode.nextElementSibling).toggle();
        }
    
    

  • 답변 # 2

    ID 사용  고유하고 아래 코드를 확인하십시오.

    직접 클릭해도 사용할 수 있습니다

    $('.toogle-toobar-open').click(function(){
      $(this).closest("label").next(".list-type-demandes").toggle();
    });
    
    

    label{
      display:block;
    }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
    function toogleListTypeDemande(element) {
        $(element).closest("label").next(".list-type-demandes").toggle();
    }
    </script>
    <label style="color: #1c5081">
            <span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b>Organisation, support et services
            </span> 
          </label>
          <div class="list-type-demandes" style="padding-left: ; display: none">
             <label style="display: inline">
             <input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="54" id="appel_projet_type_demande_list_54"> Architecture d'entreprise
            </label>
          </div>
          <label style="color: #1c5081">
            <span id="toolbar-open2" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b> Applications</span> 
          </label>
    
          <div class="list-type-demandes" style="padding-left: ; display: none">
            <label style="display: inline">
            <input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="52" id="appel_projet_type_demande_list_52"> Système d'information activités recherche
            </label>
          </div>
    
    

  • 이전 python 3.x - 내부 div 텍스트 긁기
  • 다음 kotlin - regexcontainsMatchIn (String) 또는 Stringcontains (regex)를 사용하는 것이 더 좋은 이유는 무엇입니까?