当单击上面的标签时,我尝试隐藏和显示其中包含无序列表的 div(过滤器面板--内容)。
#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
<div id="label-it" class="label-it"><label class="filter-panel--title">
<h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
</label></div>
#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
<ul class="filter-panel--option-list">
<li class="filter-panel--option">
<div class="option--container">
<span class="filter-panel--checkbox">
<input type="checkbox" id="__f__575" name="__f__575" value="575">
</span>
<label class="filter-panel--label" for="__f__575">8</label>
</div>
</li>
</ul>
</div></div>
#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
<div id="label-it" class="label-it"><label class="filter-panel--title">
<h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
</label></div>
#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
<ul class="filter-panel--option-list">
<li class="filter-panel--option">
<div class="option--container">
<span class="filter-panel--checkbox">
<input type="checkbox" id="__f__576" name="__f__576" value="576">
</span>
<label class="filter-panel--label" for="__f__576">9</label>
</div>
</li>
</ul>
</div>
#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
<div id="label-it" class="label-it"><label class="filter-panel--title">
<h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
</label></div>
#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
<ul class="filter-panel--option-list">
<li class="filter-panel--option">
<div class="option--container">
<span class="filter-panel--checkbox">
<input type="checkbox" id="__f__577" name="__f__577" value="577">
</span>
<label class="filter-panel--label" for="__f__577">10</label>
</div>
</li>
</ul>
</div>
这是我的 click() 函数,它切换类(更改背景图像),另外我想隐藏和显示点击的过滤器面板--内容:
$('.label-it').click(function() {
$(this).find(".filter-panel--title div").toggleClass('klapp klappe');
//hide and show filter-panel--content
//tried something like this but it doesn't worked:
//$(this).find(".filter-panel--content div").hide();
});
但它应该只关闭点击的标签 filter-panel--content,而不是它的每一类。有人可以帮忙吗?谢谢!
-- 编辑:
我还有一个问题,切换正常 $(this).closest(".filter-panel--flyout").find(".filter-panel--content div")
但是当我提交我的输入时,display:none 类将被刷新并且它是 display:block.. 我如何提交我切换的 .filter-panel--content
以便它保持切换?
最佳答案
你不能使用 $(this).find(".filter-panel--content div")
因为 filter-panel--content
不是label-it
的 child 。
因此,为了使其工作,您必须像 $(this).closest(".filter-panel--flyout") 那样使用
.closest()
。 find(".filter-panel--content div")
演示
$('.label-it').click(function() {
$(this).find(".filter-panel--title div").toggleClass('klapp klappe');
$(this).closest(".filter-panel--flyout").find(".filter-panel--content").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-panel--flyout">
<div id="label-it" class="label-it"><label class="filter-panel--title">
<h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
</label>
</div>
#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
<ul class="filter-panel--option-list">
<li class="filter-panel--option">
<div class="option--container">
<span class="filter-panel--checkbox">
<input type="checkbox" id="__f__575" name="__f__575" value="575">
</span>
<label class="filter-panel--label" for="__f__575">8</label>
</div>
</li>
</ul>
</div>
</div>
#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
<div id="label-it" class="label-it"><label class="filter-panel--title">
<h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
</label>
</div>
#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
<ul class="filter-panel--option-list">
<li class="filter-panel--option">
<div class="option--container">
<span class="filter-panel--checkbox">
<input type="checkbox" id="__f__576" name="__f__576" value="576">
</span>
<label class="filter-panel--label" for="__f__576">9</label>
</div>
</li>
</ul>
</div>
</div>
#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
<div id="label-it" class="label-it"><label class="filter-panel--title">
<h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
</label></div>
#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
<ul class="filter-panel--option-list">
<li class="filter-panel--option">
<div class="option--container">
<span class="filter-panel--checkbox">
<input type="checkbox" id="__f__577" name="__f__577" value="577">
</span>
<label class="filter-panel--label" for="__f__577">10</label>
</div>
</li>
</ul>
</div>
</div>
关于javascript - 使用无序列表隐藏和显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57992502/