如何通过单击按钮隐藏某些 div?
P粉193307465
P粉193307465 2023-09-04 15:51:01
0
1
549
<p>我正在寻找一种方法,通过使用按钮 onclick 事件来隐藏一定数量的 div。</p> <p>我知道它可能与 <code>.toggleClass('.AddCSSClassHere')</code> 有关,但我不太确定...我可以隐藏/显示一个 div,但不能父 div 中的特定 div。 jquery 来自我之前想要使用的代码片段。 单击“显示列”按钮时,需要显示或隐藏所有具有 hidethis 类“”的 div</p> <p> <pre class="brush:js;toolbar:false;">$('button').click(function() { $(this).siblings('div').toggleClass('hidethis '); });</pre> <pre class="brush:css;toolbar:false;">* { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #fff; padding: 0; margin: 0; font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif; font-size: 16px; } .quotation { height: 100%; overflow: auto; } .main-div { position: sticky; top: 0; } .header-div { display: flex; padding: 5px 0; background-color: #fff; } .titles { display: flex; width: 100%; align-items: center; } .currencyinfo { width: fit-content; max-width: 100px; min-width: 100px; text-align: center; padding: 0; } .info { width: fit-content; max-width: 100px; min-width: 100px; text-align: center; padding: 10px 0; } .currency { max-width: 70px; min-width: 70px; } .table-info { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; overflow-y: scroll; } .main-div-info { display: flex; text-align: center; flex-direction: row; flex-wrap: wrap; width: 100%; } .div-info { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; padding: 10px 0; align-items: center; } .hidethis { display: none; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <section class="quotation"> <div class="main-div"> <div class="header-div"> <div class="titles"> <div class="currencyinfo product-title"> <button class="show-this-data">show columns</button> </div> <div class="currencyinfo"></div> <div class="currencyinfo"></div> <div class="currencyinfo"></div>
本地
;
;
;
<div class="main-div"> <div class="header-div">
产品名称
ID
;
数量
期间
<div class="info hidethis">&nbsp;</div>
单价
单位成本
单位折扣
<div class="main-div"> <div class="header-div">
;全油门</a></div>
&nbsp;
<div class="info">1.0</div> <div class="info">1.0</div>
美元
;
37.50
0.0
;
0.0
;
</节></pre> </p>
1
0
0
P粉193307465
P粉193307465

全部回复(1)
P粉345302753

您需要上一级才能找到目标元素作为同级元素。缩进块级元素的内容有助于更好地可视化。

如果您想切换所有容器中的所有此类元素,则需要引入一个新类以在删除该类时跟踪它们,或者将它们全部选中并使用该元素列表。 p>

$(function() {
  const elsToToggle = $('.hidethis');

  $('.show-this-data').click(function() {
    $(this).parent().siblings('div').toggleClass('hidethis ');
  });

  $('.show-all-data').click(function() {
    elsToToggle.toggleClass('hidethis');
  });
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: #fff;
  padding: 0;
  margin: 0;
  font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif;
  font-size: 16px;
}

.quotation {
  height: 100%;
  overflow: auto;
}

.main-div {
  position: sticky;
  top: 0;
}

.header-div {
  display: flex;
  padding: 5px 0;
  background-color: #fff;
}

.titles {
  display: flex;
  width: 100%;
  align-items: center;
}

.currencyinfo {
  width: fit-content;
  max-width: 100px;
  min-width: 100px;
  text-align: center;
  padding: 0;
}

.info {
  width: fit-content;
  max-width: 100px;
  min-width: 100px;
  text-align: center;
  padding: 10px 0;
}

.currency {
  max-width: 70px;
  min-width: 70px;
}

.table-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  overflow-y: scroll;
}

.main-div-info {
  display: flex;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.div-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 0;
  align-items: center;
}

.hidethis {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="quotation">

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="currencyinfo product-title">
          <button class="show-this-data">show columns in this block</button>
          <button class="show-all-data">show columns in all blocks</button>
        </div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo hidethis" style="border-left: 1px solid #bdbdbd;">Local</div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
      </div>
    </div>
  </div>

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title">Product name</div>
        <div class="info">ID</div>
        <div class="info">Quantity</div>
        <div class="info">Periods</div>
        <div class="info hidethis">&nbsp;</div>
        <div class="info hidethis">Unit Price</div>
        <div class="info hidethis">Unit Cost</div>
        <div class="info hidethis">Unit Discount</div>
      </div>
    </div>
  </div>
  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title"><i class="fa fa-chevron-down rotate" aria-hidden="true"></i><a href="#">Full Throttle</a></div>
        <div class="info">&nbsp;</div>
        <div class="info">1.0</div>
        <div class="info">1.0</div>
        <div class="info hidethis">USD</div>
        <div class="info hidethis">37.50</div>
        <div class="info hidethis">0.0</div>
        <div class="info hidethis">0.0</div>
      </div>
    </div>
  </div>
</section>
热门专题
更多>
热门文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!