javascript - 我已经尝试使用 jquery 进行简单拆分器但没有工作

Question

我有 2 个 div，一个 div 类是“.section”，另一个 div 类名称是“more-section-wrapper”和“more-section-wrapper”，其头类名为“more-section-header”。点击 more-section-header 我尝试调整两个 div 的宽度，如下所示

$(".more-sections-wrapper").css("width","20px");
                    $(".sections").css("width","810px");

在那之后，我尝试删除 more-sections-wrapper 并添加新的类名 less-section-wrapper 并且我在 less-section-wrapper 的点击宽度调整上面做了。

我尝试做拆分器，但在单击时调整了 .more-section-header 类的宽度，但在单击 less-section-wrapper 类后它不起作用。

请检查下面我的代码。

$(".more-section-header").click(function() {
    $(".more-sections-wrapper").css("width","20px");
    $(".sections").css("width","810px");
    $(".more-section-header").removeClass('more-section-header').addClass('less-section-header');
    }).find(".less-section-header").click(function() {
        $(".less-sections-wrapper").css("width","347px");
        $(".sections").css("width","495px");
        $(".less-section-header").removeClass('less-section-header').addClass('more-section-header');
  });

HTML结构如下

           -----------------------------------------------
           |                        |                     |
           |                        |                     |
           |                        |                     |
           |                        |                     |
           |                        |                     |
           ------------------------------------------------

请提出一个在 jquery 中实现简单拆分器的解决方案

Answer 1

是this你想达到什么目的？

Here是动画版。