代码之家  ›  专栏  ›  技术社区  ›  Kyle Underhill

隐藏没有类的项

css jquery javascript
  •  0
  • Kyle Underhill  · 技术社区  · 7 年前

    我正在努力 hide(); sub-item 如果孩子 sub-list 没有 active 班级。这个 子列表 接收 积极的 主要1 主要2 )

    我尝试了以下代码但没有成功: 

    var item = $(".sub-list");

if (!$(item).hasClass("active")) {
  $(item)
    .closest(".sub-item")
    .hide();
} else {
  $(item)
    .closest(".sub-item")
    .show();
}

    在代码段中 sub-items 不要 隐藏(); 即使在 子列表 接收 积极的 班级。如何隐藏所有的 子项目 积极的 上课? 

    $(document).ready(function() {
  function toggleSubcatDiv(input, showTypeList) {
    var $list = $(input).closest(".post-item");
    $list
      .find(".sub-list")
      .filter(".active")
      .removeClass("active")
      .end()
      .filter('[data-for="' + $(input).attr("name") + '"]')
      .addClass("active");
  }
  $(this).on("click click.init", ".cat-item", function(e) {
    var $menu = $(this).closest(".cat-dropdown");
    var item = $(".sub-list");
    if (!$(item).hasClass("active")) {
      $(item)
        .closest(".sub-item")
        .hide();
    } else {
      $(item)
        .closest(".sub-item")
        .show();
    }
    $menu
      .find(".title")
      .children(":checkbox")
      .prop("checked", true)
      .next("span")
      .text($(this).text())
      .css("color", this.style.color);
    toggleSubcatDiv($(":radio", this), "init" !== e.namespace);
  });
});
    .sub-item {
  min-height: 10px
}

.sub-item input {
  display: none
}

.cat1 {
  border: 2px solid blue;
}

.cat2 {
  border: 2px solid red;
}

.sub-list:not(.active) {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-item">
  Main Category:
  <div class="cat-dropdown closed">
    <div class="edit">
      <label class="title">
<input type="checkbox"><span> Choose...</span>
</label>
      <div class="cat-dropdown-menu">
        <div class="cat-list" id="category">
          <label class="cat-item" style="color:blue">
<input type="radio" name="cat1">Main 1</label>
          <label class="cat-item" style="color:red">
<input type="radio" name="cat2">Main 2</label>
        </div>
      </div>
    </div>
  </div>
  Sub Category:
  <div class="sub-container">
    <div class="type-list">
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="comp">
<input class="sub-input" id="comp" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha" fill="blue" d="M21.72 16.784a.094.094 0 0 0-.071-.033H3.351a.094.094 0 0 0-.093.108c.003.017.279 1.711 2.421 1.711h13.642c2.142 0 2.418-1.694 2.42-1.711a.095.095 0 0 0-.021-.075zm-7.844 1.193h-2.752v-.633h2.752v.633zM5.252 16.092h14.496c.21 0 .38-.17.38-.38V6.81a.38.38 0 0 0-.38-.38H5.252a.38.38 0 0 0-.38.38v8.904c0 .21.17.38.38.38zM6.2 7.758h12.598v7.006H6.201V7.758z"/></svg><br><b>Main 1A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="ticket">
<input class="sub-input" id="ticket" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha2" fill="blue" d="M7.519 14.008l3.473 3.473 6.372-6.372-3.473-3.473-6.372 6.372zm13.884-4.77L19.925 7.76a1.98 1.98 0 0 1-2.686-2.686l-1.477-1.477a.992.992 0 0 0-1.4 0L3.597 14.362a.992.992 0 0 0 0 1.4l1.478 1.478a1.98 1.98 0 0 1 2.685 2.686l1.478 1.477a.993.993 0 0 0 1.4 0l10.765-10.765a.993.993 0 0 0 0-1.4zM10.992 19.07L5.93 14.008l7.962-7.96 5.06 5.061-7.96 7.96z"/></svg><br><b>Main 1B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="elephant">
<input class="sub-input" id="elephant" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha3" fill="red" d="M19.565 9.341h-4.086a4.636 4.636 0 0 1-1.67 3.027.476.476 0 0 1-.672-.067.478.478 0 0 1 .066-.674 3.684 3.684 0 0 0 1.354-2.858 3.7 3.7 0 0 0-3.695-3.695A3.7 3.7 0 0 0 7.188 8.38a3.448 3.448 0 0 0-.86.702c-.826.936-1.008 2.16-1.008 3.053 0 .382.01.765.02 1.135.03 1.11.066 2.493-.3 2.87-.029.029-.115.117-.422.117a.957.957 0 1 0 0 1.914c.74 0 1.343-.234 1.793-.696.6-.617.795-1.505.846-2.513.113.003.234.005.36.005.955 0 2.245-.115 3.266-.627 0 0-.07.442-.07.568v3.807c0 .68.643 1.211 1.325 1.211h.018c.682 0 1.23-.53 1.23-1.21v-1.96h4.544v1.975c0 .672.565 1.195 1.237 1.195h.018c.672 0 1.197-.523 1.197-1.195v-2.182c.598-.3.957-.898.957-1.586v-3.828c0-.99-.783-1.794-1.774-1.794zM7.189 12.107a.451.451 0 1 1 .902 0 .451.451 0 0 1-.902 0z"/></svg><br><b>Main 2A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="hook">
<input class="sub-input" id="hook" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha4" fill="red" d="M13.587 16.6h1.829c-.254 1.303-1.405 2.31-2.772 2.31a2.836 2.836 0 0 1-2.823-2.836v-5.166a.853.853 0 0 0 .25-.611V5.884a.779.779 0 0 0-.776-.793.779.779 0 0 0-.776.793v4.413c0 .246.1.466.25.611v5.166c0 2.115 1.74 3.835 3.854 3.835 2.09 0 3.821-1.717 3.846-3.83l.012-1.97v-1.573L13.587 16.6z"/></svg><br><b>Main 2B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="plane">
<input class="sub-input" id="plane" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha5" fill="red" d="M20.061 15.32v-.868l-6.14-4.27.14-3.993c-.071-2.093-1.417-2.427-1.614-2.427-.196 0-1.526.44-1.507 2.427l.14 3.992-6.141 4.271v.868l6.28-1.167.16 4.568-2.294 1.595v.392h2.493a1.07 1.07 0 0 0 1.846 0h2.49v-.392l-2.292-1.595.16-4.568 6.28 1.167z"/></svg><br><b>Main 2C</b></span></label>
        </div>
      </div>
    </div>
  </div>
</div>
    2 回复  |  直到 7 年前
        1
  •  2
  •   Louys Patrice Bessette    7 年前

    $(".sub-list") 返回多个元素。

    所以当你测试使用 .hasClass() ,你总是得到一个 true ,因为至少有一个返回的元素具有类。

    你得跑一趟 .each() 循环以分别测试所有元素: 

    var item = $(".sub-list");

item.each(function(){
  if (!$(this).hasClass("active")) {
    $(this)
      .closest(".sub-item")
      .hide();
  } else {
    $(this)
      .closest(".sub-item")
      .show();
  }
});

    我还为单选按钮添加了一个快速修复程序。。。要取消选中其他项: 

    $(".cat-item").not(this).find("input").prop("checked",false);


    您的代码段已修复上述更改: 

    $(document).ready(function() {
  function toggleSubcatDiv(input, showTypeList) {
    var $list = $(input).closest(".post-item");
    $list
      .find(".sub-list")
      .filter(".active")
      .removeClass("active")
      .end()
      .filter('[data-for="' + $(input).attr("name") + '"]')
      .addClass("active");
  }
  $(this).on("click click.init", ".cat-item", function(e) {
    $(".cat-item").not(this).find("input").prop("checked",false);
    
    var $menu = $(this).closest(".cat-dropdown");
    var item = $(".sub-list");
    
    item.each(function(){
      if (!$(this).hasClass("active")) {
        $(this)
          .closest(".sub-item")
          .hide();
      } else {
        $(this)
          .closest(".sub-item")
          .show();
      }
    });
    $menu
      .find(".title")
      .children(":checkbox")
      .prop("checked", true)
      .next("span")
      .text($(this).text())
      .css("color", this.style.color);
    toggleSubcatDiv($(":radio", this), "init" !== e.namespace);
  });
});
    .sub-item {
  min-height: 10px
}

.sub-item input {
  display: none
}

.cat1 {
  border: 2px solid blue;
}

.cat2 {
  border: 2px solid red;
}

.sub-list:not(.active) {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-item">
  Main Category:
  <div class="cat-dropdown closed">
    <div class="edit">
      <label class="title">
<input type="checkbox"><span> Choose...</span>
</label>
      <div class="cat-dropdown-menu">
        <div class="cat-list" id="category">
          <label class="cat-item" style="color:blue">
<input type="radio" name="cat1">Main 1</label>
          <label class="cat-item" style="color:red">
<input type="radio" name="cat2">Main 2</label>
        </div>
      </div>
    </div>
  </div>
  Sub Category:
  <div class="sub-container">
    <div class="type-list">
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="comp">
<input class="sub-input" id="comp" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha" fill="blue" d="M21.72 16.784a.094.094 0 0 0-.071-.033H3.351a.094.094 0 0 0-.093.108c.003.017.279 1.711 2.421 1.711h13.642c2.142 0 2.418-1.694 2.42-1.711a.095.095 0 0 0-.021-.075zm-7.844 1.193h-2.752v-.633h2.752v.633zM5.252 16.092h14.496c.21 0 .38-.17.38-.38V6.81a.38.38 0 0 0-.38-.38H5.252a.38.38 0 0 0-.38.38v8.904c0 .21.17.38.38.38zM6.2 7.758h12.598v7.006H6.201V7.758z"/></svg><br><b>Main 1A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="ticket">
<input class="sub-input" id="ticket" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha2" fill="blue" d="M7.519 14.008l3.473 3.473 6.372-6.372-3.473-3.473-6.372 6.372zm13.884-4.77L19.925 7.76a1.98 1.98 0 0 1-2.686-2.686l-1.477-1.477a.992.992 0 0 0-1.4 0L3.597 14.362a.992.992 0 0 0 0 1.4l1.478 1.478a1.98 1.98 0 0 1 2.685 2.686l1.478 1.477a.993.993 0 0 0 1.4 0l10.765-10.765a.993.993 0 0 0 0-1.4zM10.992 19.07L5.93 14.008l7.962-7.96 5.06 5.061-7.96 7.96z"/></svg><br><b>Main 1B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="elephant">
<input class="sub-input" id="elephant" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha3" fill="red" d="M19.565 9.341h-4.086a4.636 4.636 0 0 1-1.67 3.027.476.476 0 0 1-.672-.067.478.478 0 0 1 .066-.674 3.684 3.684 0 0 0 1.354-2.858 3.7 3.7 0 0 0-3.695-3.695A3.7 3.7 0 0 0 7.188 8.38a3.448 3.448 0 0 0-.86.702c-.826.936-1.008 2.16-1.008 3.053 0 .382.01.765.02 1.135.03 1.11.066 2.493-.3 2.87-.029.029-.115.117-.422.117a.957.957 0 1 0 0 1.914c.74 0 1.343-.234 1.793-.696.6-.617.795-1.505.846-2.513.113.003.234.005.36.005.955 0 2.245-.115 3.266-.627 0 0-.07.442-.07.568v3.807c0 .68.643 1.211 1.325 1.211h.018c.682 0 1.23-.53 1.23-1.21v-1.96h4.544v1.975c0 .672.565 1.195 1.237 1.195h.018c.672 0 1.197-.523 1.197-1.195v-2.182c.598-.3.957-.898.957-1.586v-3.828c0-.99-.783-1.794-1.774-1.794zM7.189 12.107a.451.451 0 1 1 .902 0 .451.451 0 0 1-.902 0z"/></svg><br><b>Main 2A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="hook">
<input class="sub-input" id="hook" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha4" fill="red" d="M13.587 16.6h1.829c-.254 1.303-1.405 2.31-2.772 2.31a2.836 2.836 0 0 1-2.823-2.836v-5.166a.853.853 0 0 0 .25-.611V5.884a.779.779 0 0 0-.776-.793.779.779 0 0 0-.776.793v4.413c0 .246.1.466.25.611v5.166c0 2.115 1.74 3.835 3.854 3.835 2.09 0 3.821-1.717 3.846-3.83l.012-1.97v-1.573L13.587 16.6z"/></svg><br><b>Main 2B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="plane">
<input class="sub-input" id="plane" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha5" fill="red" d="M20.061 15.32v-.868l-6.14-4.27.14-3.993c-.071-2.093-1.417-2.427-1.614-2.427-.196 0-1.526.44-1.507 2.427l.14 3.992-6.141 4.271v.868l6.28-1.167.16 4.568-2.294 1.595v.392h2.493a1.07 1.07 0 0 0 1.846 0h2.49v-.392l-2.292-1.595.16-4.568 6.28 1.167z"/></svg><br><b>Main 2C</b></span></label>
        </div>
      </div>
    </div>
  </div>
</div>
        2
  •  0
  •   Wenbin    7 年前

    项已经是jquery对象,无需再次使用$(),您可以尝试以下操作: 

    var $item = $(".sub-list");

if (!$item.hasClass("active")) {
  $item
    .closest(".sub-item")
    .hide();
} else {
  $item
    .closest(".sub-item")
    .show();
}
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Dr.0000FF  ·  jQuery按钮点击不显示/隐藏内容
    1 年前
    user28928120  ·  如何在jquery中选择所有类?
    1 年前
    LauraNMS  ·  如何使用Waypoints js实现粘性元素和偏移量
    1 年前
    Eliable  ·  使点击计数器和进度条协同工作
    1 年前
    mlri  ·  从不同的onclick事件执行相同的javascript函数
    1 年前
    Cymro  ·  如何将jquery$(this)与$(document).keyup一起使用
    1 年前
    Jack Maessen  ·  在处理程序上使用时如何获取输入类型
    1 年前
    BlueDogRanch  ·  使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)
    1 年前
    Jameel  ·  Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号