使切换功能仅适用于单击打开的框，而不是所有框

Make toggle function work only for the box that is clicked open and not all boxes?

本文关键字：功能 适用于 单击      更新时间：2023-09-26

代码：

<script type="text/javascript">
    $(document).ready(function () {
        $('.box').on('click', function (e) {
            e.preventDefault();
            var $btn = $(this);
            $btn.toggleClass('opened');
            var heights = $btn.hasClass('opened') ? 300 : 100;
            $(this).stop().animate({ height: heights }, 800);
            //$(".sync_store_info_input_holder").toggle();
        });
    });
</script>

使用上面的代码，我能够完成我需要的事情，但我对以下行有一点问题：

$（".sync_store_info_input_holder"）.toggle（）;

我需要它仅在 .box 打开时显示，而不是在关闭时显示。 我还需要它，所以只显示用户打开的框。 我有 18 个使用 .box 类的框，只有 id 是唯一的，因此用户打开的唯一框是切换功能应该工作的时候。

似乎您可以使用 showOrHide 版本的 toggle() 。如果没有，请制作一个代码的jsFiddle来解释问题。

<script type="text/javascript">
    $(document).ready(function () {
        $('.box').on('click', function(e) {
            e.preventDefault();
            var $btn = $(this);
            $btn.toggleClass('opened');
            // Make whether the box is open a variable for reuse
            var isOpen = $btn.hasClass('opened');
            var heights = isOpen ? 300 : 100;
            // Reuse $btn instead of $(this)
            $btn.stop().animate({ height: heights }, 800);
            // Important change
            $(".sync_store_info_input_holder").toggle(isOpen);
        });
    });
</script>

编辑

我还需要它，所以只显示用户打开的框。我有 18 个使用 .box 类的框，只有 id 是唯一的，因此用户打开的唯一框是切换功能应该工作的时候。

你的意思是每个盒子里都有一个.sync_store_info_input_holder元素吗？如果是这样，您可以将该行更改为

$(".sync_store_info_input_holder", this).toggle(isOpen);

以仅选择.box上下文中的元素。如果它在.box之外，您必须显示 HTML 以便我们举例。

相关文章：