Question

我试图更新我网站上的信息格式，以便用户可以点击按钮来切换显示/隐藏css属性，但是我需要有很多不同的部分。可折叠。我宁愿不使用不同的库，所以希望有一个解决方案。这是我目前正在使用的代码示例。我有这么多的部分，这最终会导致很多javascript线。我想将它们浓缩为其中一个功能，这些功能可以单独切换不同的部分。

$('#instruction1-toggle').click(function() {
    var button=$(this);
    if (button.hasClass('active')) {
        $('.instruction1-container').hide();
    } else {
        $('.instruction1-container').show();
    }
});

这是我目前将所有功能合二为一的尝试。

$('#instructions-toggle').click(function() {
    var button=$(this);
    var toggle=getElementsByClassName(this);
    if (button.hasClass('active')) {
        toggle.hide();
    } else {
        toggle.show();
    }
});

此尝试尝试获取单击按钮的类名，然后显示/隐藏包含该类的内容，但它也会隐藏按钮，这是一种不必要的效果。

Answer 1

如果你不使用你点击的元素的class属性会更好，因为它可能需要/有几个CSS类。而是使用特定的数据属性来存储需要切换的其他元素的类

这是一个小例子：

＆＃13;

$('.btn').click(function() {
    $("." + $(this).data("toggle")).toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-toggle="target1">Button 1</button>
<button class="btn" data-toggle="target2">Button 2</button>
<div class="target1">item for button 1</div>
<div class="target2">item for button 2</div>
<div class="target1">another item for button 1</div>
<div class="target2">another item for button 2</div>

＆＃13;

如何在不使用额外库的情况下将几个javascript显示/隐藏功能压缩成一个？

1 个答案: