javascript - 显示/隐藏单个 Div 的简便方法？-6ren

javascript - 显示/隐藏单个 Div 的简便方法？

转载作者：行者123 更新时间：2023-11-28 07:13:02

在我的网站上，我有 div，只要你点击它就会切换，如 js fiddle 所示:my fiddle .

HTML

<body>

<div class="class1">Div 1</div>
<div class="class2">Div 2</div>

<div class="class1">Div 3</div>
<div class="class2">Div 4</div>

<div class="class1">Div 5</div>
<div class="class2">Div 6</div>

<div class="class1">Div 7</div>
<div class="class2">Div 8</div>

</body>

小 CSS

.class2{display: none;}

Javascript

$(document).ready(function(){
$(".class1").click(function(){
    $(".class2").show();
    $(".class1").hide();
});
$(".class2").click(function(){
    $(".class1").show();
    $(".class2").hide();
});
});

现在我想要它，这样当我点击一个 Div 时，例如 Div 1，Div 2 就会出现，但与 js fiddle 不同，我想要它，这样 Div 4、6 和 8 也不显示。我知道我可以通过给每个 div 一个唯一的类或 id 来做到这一点，但是这会花费很多时间，因为我正在处理，比如说，100 个 div。如果有任何简单的方法，只需单击一个 div 并将其与另一个 div 切换，而无需所有其他 div 也切换。感谢您的帮助!

最佳答案

FIDDLE

$(document).ready(function(){
    $(".class1").click(function(){
        $(this).toggle();
        $(this).next().toggle();
    });
    $(".class2").click(function(){
        $(this).toggle();
        $(this).prev().toggle();
    });
});

使用.next() 和.prev()。假设你想切换下一个和上一个元素

关于javascript - 显示/隐藏单个 Div 的简便方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32514518/