我如何通过点击 button1 来扩展最近的对应 ul.dropmenu 而不是给它们一个单独的 id/class?
HTML:
<ul class="mainlist">
<li><img id="wall1.thumb" class="icon" src="/images/placeholder.jpg">
<img class="button1 d1" src="/images/info.png">
<ul class="dropmenu menu1">
<p id="wall1.info">
<div>File Size:</div>
<div>Upload Date:</div>
<div>Dimensions:</div>
</p>
</ul>
</li>
<li><img id="wall2.thumb" class="icon" src="/images/placeholder.jpg">
<img class="button1 d2" src="/images/info.png”>
<ul class="dropmenu menu2">
<p id="wall2.info">
<div>File Size:</div>
<div>Upload Date:</div>
<div>Dimensions:</div>
</p>
</ul>
</li>
</ul>
j查询:
$(".d1").on("click", function () {
$("ul.dropmenu.menu1").slideToggle("fast", "linear", function() {
$("ul.dropmenu").not("ul.dropmenu.menu1").slideUp(200, "swing");
})
})
$(".d2").on("click", function () {
$("ul.dropmenu.menu2").slideToggle("fast", "linear", function() {
$("ul.dropmenu").not("ul.dropmenu.menu2").slideUp(200, "swing");
})
})
我已经在这里看到了建议的问题:open closest ul on click jQuery 但是它并没有解决我的问题,因为我试图在 ul 内的 li 内扩展 ul 而不仅仅是 ul 内的 li
最佳答案
使用 siblings()
函数获取点击按钮附近的下拉菜单
$(".d1,.d2").on("click", function() {
var closestUl = $(this).siblings("ul.dropmenu")
closestUl.slideToggle("fast", "linear", function() {
$("ul.dropmenu").not(closestUl).slideUp(200, "swing");
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="mainlist">
<li>
<img id="wall1.thumb" class="icon" src="/images/placeholder.jpg" />
<img class="button1 d1" src="/images/info.png" />
<ul class="dropmenu menu1">
<p id="wall1.info">
<div>File Size:</div>
<div>Upload Date:</div>
<div>Dimensions:</div>
</p>
</ul>
</li>
<li>
<img id="wall2.thumb" class="icon" src="/images/placeholder.jpg" />
<img class="button1 d2" src="/images/info.png" />
<ul class="dropmenu menu2">
<p id="wall2.info ">
<div>File Size:</div>
<div>Upload Date:</div>
<div>Dimensions:</div>
</p>
</ul>
</li>
</ul>
关于jquery - 单击时展开相应的 ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59658271/