我希望找到一种方法来隐藏一定数量的div使用按钮onclick事件。
我知道这可能与.toggleClass('.AddCSSClassHere')
有关,但我不确定。我可以隐藏/显示一个div,但不能隐藏父div中的特定div。jquery来自我之前想使用的代码片段。当单击显示列按钮时,所有具有hidethis类“”的div需要显示或隐藏
$('button').click(function() {
$(this).siblings('div').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</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"> </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"> </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>
1条答案
按热度按时间rdrgkggo1#
您需要上一级查找作为兄弟的目标元素。缩进块级元素的内容有助于更好地可视化。
如果你想在所有容器中切换所有这样的元素,你需要引入一个新的类来在类被删除时跟踪它们,或者选择它们一次并使用元素列表。