所以我有一些使用 UL 列表和几个 LI 标签排列的图 block 。
我希望在 LI 标签之一内有一个按钮,按下该按钮将隐藏整个图 block 。
不知道该怎么做。类似 - this.('li').hide() 但我知道那是错误的哈哈。
非常感谢。
<ul class="sortable grid">
<li>Item 1</li><button onclick="hidePane()">Dismiss</button>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<script>
function hidePane(){
this.hide();
}
</script>
我希望它是动态的。其预期用途是用一个循环拉动许多图 block 。因此,我希望每个按钮上都有一个关闭按钮,当您单击时,它只会在您滚动时隐藏图 block 。
最佳答案
不要将元素放在 li
之外。在 ul
中,内部的第一级元素应该始终只是 li
,因此您可以在 li
内部放置按钮:
$('.sortable button').on('click', function() {
$(this).parent('li').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortable grid">
<li>Item 1<button>Dismiss</button></li>
<li>Item 2<button>Dismiss</button></li>
<li>Item 3<button>Dismiss</button></li>
</ul>
基于您的代码的解决方案,仅使用 JavaScript
意味着使用 event.target
来获取当前单击的按钮及其使用 parentElement
的父级按钮code> 并且您还可以使用 style.display = none;
因为纯 JavaScript
中没有 hide()
方法:
function hidePane(event) {
event.target.parentElement.style.display = 'none';
}
<ul class="sortable grid">
<li>Item 1<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 2<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 3<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 4<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 5<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 6<button onclick="hidePane(event)">Dismiss</button></li>
</ul>
关于javascript - 使用 jQuery/Javascript 隐藏按钮包含的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45210503/