Question

我尝试从我单击的跨度范围中切换div类


def cont():
    import sys

    c = input('File2: Would you like to continue? ')
    if c == 'Y' or 'y':
        print('File2: Ok we\'ll carry on...')
        print(' ')
        return

    else: sys.exit()

但是它不起作用。

如果我使用：

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

这是可行的，但它向我显示了两个div，我需要显示“ this”范围中的div

此处HTML：

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

此处是脚本：

<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>

Answer 1

使用唯一的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>

Answer 2

您只需要修改toogleListTypeDemande(element)。

Javascript提供了属性 nextElementSibling 来获取下一个html元素。不幸的是，您的span元素没有下一个兄弟姐妹。因此，我们需要向后移动一个节点以获取其父节点 element.parentNode -这是标签-然后从那里下一个兄弟节点是div。

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

jQuery Span单击查找下一个div

2 个答案: