1

代码：

<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 是唯一的，因此用户打开的唯一框就是切换功能应该起作用的时候。

4

1 回答 1

1

看来您可以使用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 以供我们举例。

于 2013-09-05T23:48:49.263 回答