Question

有这个jquery函数，每次点击都会给我第二个函数。我怎么能阻止这个？

我有一个有3个链接的导航栏，对于每个链接，我都有一个带有不同ID的.contentDiv。每当somone点击其中一个链接时，就会发生切换功能;隐藏所有.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
            });
        }
    );
});

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

Answer 3

在v1.8中不推荐使用jQuery toggle（）函数在两个指定函数之间切换，并在1.9中删除here。 toggle（）现在仅用于交替显示show（）和hide（）。

因此，您必须按照其他答案中的说明创建自定义切换插件，或者您可以查看此stack overflow question and answer。

jquery animate function -click one div toggle another

3 个答案: