Question

我正在使用jQuery选项卡插件，该插件根据其内容调整选项卡容器高度。在一些选项卡容器中是第二组选项卡（使用不同的脚本），因此在导航第二组选项卡时，我需要父选项卡高度相应地更改。

仅在单击父标签导航时触发父标签高度更改，因此我已向子标签导航元素添加了单击功能，以检查父标签容器的高度并相应地更改。 / p>

除了我需要在父标签高度发生变化之前两次点击子标签导航元素这一事实之外，它似乎有效。

您可以在此处查看我正在使用的内容 - http://www.space-heat.com.gridhosted.co.uk/prices/ - 如果您在第一次打开厨房标签时选择了厨房标签，则第二次点击将调整厨房的高度父标签容器。

那么有人可以建议为什么它只能在第二次点击时工作吗？

这里是父标签的jQuery：

//Prices page tabs
// Variables
var clickedTab = $(".tabs > .active");
var tabWrapper = $(".tab__content");
var activeTab = tabWrapper.find(".active");
var activeTabHeight = activeTab.outerHeight();

// Show tab on page load
activeTab.show();

// Set height of wrapper on page load
tabWrapper.height(activeTabHeight*0.7);

$(".tabs > li").on("click", function() {

    // Remove class from active tab
    $(".tabs > li").removeClass("active");

    // Add class active to clicked tab
    $(this).addClass("active");

    // Update clickedTab variable
    clickedTab = $(".tabs .active");

    // fade out active tab
    activeTab.fadeOut(250, function() {

        // Remove active class all tabs
        $(".tab__content > li").removeClass("active");

        // Get index of clicked tab
        var clickedTabIndex = clickedTab.index();

        // Add class active to corresponding tab
        $(".tab__content > li").eq(clickedTabIndex).addClass("active");

        // update new active tab
        activeTab = $(".tab__content > .active");

        // Update variable
        activeTabHeight = activeTab.outerHeight();

        // Animate height of wrapper to new tab height
        tabWrapper.stop().delay(50).animate({
            height: activeTabHeight
        }, 500, function() {

            // Fade in active tab
            activeTab.delay(50).fadeIn(250);

        });
    });
});

这是我在单击父选项卡中的第二组选项卡时编写的用于重置父选项卡容器高度的单击函数。

$(".tab__content .su-tabs-nav span").click(function() {
  // Update variable
  activeTabHeight = activeTab.outerHeight();

  // Animate height of wrapper to new tab height
  tabWrapper.stop().delay(50).animate({
      height: activeTabHeight
  }, 500, function() {

      // Fade in active tab
      activeTab.delay(50).fadeIn(250);

  });
});

Answer 1

试试吧这不是经过测试的答案，只是快速的答案

$(".tab__content .su-tabs-nav span").click(function(e) {
  e.preventDefault();  //  Here is the change / addOn // above line also
  // Update variable
  activeTabHeight = activeTab.outerHeight();

  // Animate height of wrapper to new tab height
  tabWrapper.stop().delay(50).animate({
  height: activeTabHeight
  }, 500, function() {

  // Fade in active tab
  activeTab.delay(50).fadeIn(250);

  });
});

jQuery点击功能仅适用于每一次点击

1 个答案: