jQuery动画函数 - 点击一个div切换另一个

Question

我有一个jQuery函数，每次点击都会给我第二个函数。我该如何停止这种情况？

我有一个导航栏，其中包含3个链接，对于每个链接，我都有一个具有不同id的.contentDiv。每当有人单击其中一个链接时，切换功能就会发生；隐藏除与该链接相关联的那个.contentDiv之外的所有.contentDiv，并对该.contentDiv执行向左滑动的动画。

HTML：

.navbar
ul
    li
        a.about(href='#') About
            span
            span
    li
        a#portfolio(href='#') HOME
            span
            span
    li
        a(href='#') Contact
            span
            span
.contentDiv#portfolioContent
                    .title About
                    .content
                        .fse
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

CSS：

    .contentDiv {
    transform: skew(45deg);
    width: 100%;
    height: 100%;
    position: relative;
    top: 5%;
    left: 300%;
    overflow: hidden;
}

.title {
    position: absolute;
    top: 30%;
    left: 30%;
    font-size: 500%;
    font-family: Raleway;
    font-weight: 800;
    color: #EAEBED;
}

.content {
    width: 100%;
    height: 50%;
    top: 43%;
    left: 3%;
    font-size: 130%;
    font-family: Raleway;
    color: #EAEBED;
    position: absolute;
    overflow:scroll;
    padding-bottom: 7%;
}

Jquery:

$('.about').click(function () {
    $("#aboutContent").toggle(
        function() {
            $("#aboutContent").animate({left: "115%"}, { //coming out of hiding
                duration: 2000
            });
        }, function() {
            $("#aboutContent").animate({left: "300%"}, { //back into hiding
                duration: 2000
            });
        }
    );
});

- Mus3Math

---

你是说只有第二个被调用了，但实际上你想让两个处理程序都运行？ - Cody

这是切换功能的工作方式吗？ - user7926048

当单击“.about”时，只有第二个切换函数在运行，但我希望两个都运行。 - Mus3Math

你想调用点击事件的另一个函数还是停止切换功能？ - dEL

我希望点击时它在函数之间切换，但它只调用第二个函数。 - Mus3Math

嗯...你的使用方式和他们在API中引用的方式相同，https://api.jquery.com/toggle-event/。不确定为什么它不起作用。 - Michael Coker

Answer 1

var c = 1;
$('.about').click(function() {
  $("#aboutContent").toggle(function() {
    c++;
    if (c % 2 == 0) alert("1")
    else alert("2");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
try this:
<button class="about">
  click
</button>

<div id="aboutContent">
  code..
</div>

- Hemant

---

这个也可以，但另一个更适合我的需求。不过还是谢谢。 - Mus3Math

Answer 2

你可以创建一个clickToggle函数，并在单击时使用它来在两个函数之间切换：

来源：jQuery click / toggle between two functions

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

$('.about').clickToggle(function() {
  alert("First handler for .toggle() called.");
   $("#aboutContent").toggle("Slow");
}, function() {
  alert("Second handler for .toggle() called.");
   $("#aboutContent").toggle("Slow");
});

#aboutContent {
  height: 200px;
  width: 200px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button class="about">
  CLICK
</button>

<div id="aboutContent">
  123123123
</div>

- Dalin Huang

---

我尝试在链接（“a”标记）上使用此功能，它会使链接部分消失。 - Mus3Math

我会把我所有的HTML、CSS和jquery都放上去，这样你就可以看到发生了什么。 - Mus3Math

@Mus3Math 嗯，也许可以尝试我的更新解决方案，创建一个函数，这样你以后就可以在任何地方使用它。 - Dalin Huang

只需上传剩余的代码，这样您就可以查看它。 - Mus3Math

Answer 3

jQuery的toggle()函数在v1.8中被弃用，并在1.9中被移除，如此处所述，用于在两个指定函数之间切换。现在，toggle()仅用于交替显示(show())和隐藏(hide())。

因此，您需要创建一个自定义的toggle插件，如其他答案中所述，或者您可以查看stack overflow的问题和答案。

- Rajalakshmi P